{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$metadata": {
    "name": "Outlex Design System v2 — Precision + Atmosphere",
    "version": "2.0.0",
    "date": "2026-06-10",
    "direction": "B",
    "notes": "Dark-first OKLCH-native token set. Two mode groups: 'dark' (default) and 'light'. Additive — legacy tokens.css untouched. CSS var names use --ox-* prefix."
  },

  "color": {

    "$description": "Color primitive ramps — 11 steps per family, OKLCH format",

    "sage": {
      "$description": "Primary CTA / success / foliage — 150deg hue",
      "50":  { "$value": "oklch(0.97 0.020 150deg)", "$type": "color" },
      "100": { "$value": "oklch(0.94 0.040 150deg)", "$type": "color" },
      "200": { "$value": "oklch(0.88 0.060 150deg)", "$type": "color" },
      "300": { "$value": "oklch(0.75 0.090 150deg)", "$type": "color" },
      "400": { "$value": "oklch(0.68 0.100 150deg)", "$type": "color" },
      "500": { "$value": "oklch(0.60 0.100 150deg)", "$type": "color" },
      "600": { "$value": "oklch(0.52 0.100 150deg)", "$type": "color" },
      "700": { "$value": "oklch(0.45 0.090 150deg)", "$type": "color" },
      "800": { "$value": "oklch(0.37 0.075 150deg)", "$type": "color" },
      "900": { "$value": "oklch(0.28 0.055 150deg)", "$type": "color" },
      "950": { "$value": "oklch(0.20 0.035 150deg)", "$type": "color" }
    },

    "amber": {
      "$description": "WARNING/PENDING accent — 75deg hue. Tiny dots, deadline meta text, focus rings ONLY. NOT an AI/Lexi colour. AI accent is teal #54D6A4 via --ox-ai-accent.",
      "50":  { "$value": "oklch(0.98 0.020 75deg)", "$type": "color" },
      "100": { "$value": "oklch(0.96 0.040 75deg)", "$type": "color" },
      "200": { "$value": "oklch(0.92 0.080 75deg)", "$type": "color" },
      "300": { "$value": "oklch(0.85 0.130 75deg)", "$type": "color" },
      "400": { "$value": "oklch(0.78 0.140 75deg)", "$type": "color" },
      "500": { "$value": "oklch(0.70 0.140 75deg)", "$type": "color" },
      "600": { "$value": "oklch(0.62 0.130 75deg)", "$type": "color" },
      "700": { "$value": "oklch(0.54 0.110 75deg)", "$type": "color" },
      "800": { "$value": "oklch(0.44 0.090 75deg)", "$type": "color" },
      "900": { "$value": "oklch(0.34 0.065 75deg)", "$type": "color" },
      "950": { "$value": "oklch(0.24 0.040 75deg)", "$type": "color" }
    },

    "terracotta": {
      "$description": "Warning / destructive states — 28deg hue",
      "50":  { "$value": "oklch(0.97 0.020 28deg)", "$type": "color" },
      "100": { "$value": "oklch(0.94 0.040 28deg)", "$type": "color" },
      "200": { "$value": "oklch(0.89 0.070 28deg)", "$type": "color" },
      "300": { "$value": "oklch(0.80 0.120 28deg)", "$type": "color" },
      "400": { "$value": "oklch(0.70 0.150 28deg)", "$type": "color" },
      "500": { "$value": "oklch(0.60 0.160 28deg)", "$type": "color" },
      "600": { "$value": "oklch(0.52 0.155 28deg)", "$type": "color" },
      "700": { "$value": "oklch(0.44 0.140 28deg)", "$type": "color" },
      "800": { "$value": "oklch(0.35 0.110 28deg)", "$type": "color" },
      "900": { "$value": "oklch(0.26 0.075 28deg)", "$type": "color" },
      "950": { "$value": "oklch(0.18 0.045 28deg)", "$type": "color" }
    },

    "blue": {
      "$description": "Informational / interactive / brand link — 270deg hue",
      "50":  { "$value": "oklch(0.97 0.020 270deg)", "$type": "color" },
      "100": { "$value": "oklch(0.94 0.040 270deg)", "$type": "color" },
      "200": { "$value": "oklch(0.88 0.080 270deg)", "$type": "color" },
      "300": { "$value": "oklch(0.78 0.130 270deg)", "$type": "color" },
      "400": { "$value": "oklch(0.65 0.170 270deg)", "$type": "color" },
      "500": { "$value": "oklch(0.57 0.150 270deg)", "$type": "color" },
      "600": { "$value": "oklch(0.50 0.140 270deg)", "$type": "color" },
      "700": { "$value": "oklch(0.42 0.125 270deg)", "$type": "color" },
      "800": { "$value": "oklch(0.33 0.100 270deg)", "$type": "color" },
      "900": { "$value": "oklch(0.24 0.070 270deg)", "$type": "color" },
      "950": { "$value": "oklch(0.16 0.040 270deg)", "$type": "color" }
    }

  },

  "semantic": {

    "$description": "Semantic tokens with mode-specific values. Two modes: 'dark' (default) and 'light'.",
    "$extensions": {
      "mode": {
        "dark": "default",
        "light": "explicit — apply via [data-theme=light] or prefers-color-scheme"
      }
    },

    "surface": {
      "$description": "Surface elevation ladder. Dark = lightness-lift; Light = white + warm-paper.",

      "0": {
        "$type": "color",
        "$description": "Page base background. Light = warm cream ≈ #F5F1EA — must read as designed paper at a glance. NEVER pure white or lightness > 0.97 in light theme.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.12 0.015 270deg)",
            "light": "oklch(0.962 0.010 80deg)"
          }
        },
        "$value": "oklch(0.12 0.015 270deg)"
      },
      "1": {
        "$type": "color",
        "$description": "Elevated panels / sidebars",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.16 0.012 270deg)",
            "light": "#FFFFFF"
          }
        },
        "$value": "oklch(0.16 0.012 270deg)"
      },
      "2": {
        "$type": "color",
        "$description": "Elevated cards. Light = near-white — pops against cream page base.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.20 0.010 270deg)",
            "light": "oklch(0.994 0.003 80deg)"
          }
        },
        "$value": "oklch(0.20 0.010 270deg)"
      },
      "3": {
        "$type": "color",
        "$description": "Hover states",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.24 0.008 270deg)",
            "light": "oklch(0.950 0.010 80deg)"
          }
        },
        "$value": "oklch(0.24 0.008 270deg)"
      },
      "4": {
        "$type": "color",
        "$description": "Highest elevation / tooltips / depressed active",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.28 0.008 270deg)",
            "light": "oklch(0.935 0.012 80deg)"
          }
        },
        "$value": "oklch(0.28 0.008 270deg)"
      }
    },

    "foreground": {
      "primary": {
        "$type": "color",
        "$description": "Headlines, active nav. WCAG AA on surface-0 both themes.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.97 0.005 270deg)",
            "light": "#231F20"
          }
        },
        "$value": "oklch(0.97 0.005 270deg)"
      },
      "secondary": {
        "$type": "color",
        "$description": "Body copy. >=4.5:1 contrast ratio both themes.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.82 0.006 270deg)",
            "light": "#4A4641"
          }
        },
        "$value": "oklch(0.82 0.006 270deg)"
      },
      "muted": {
        "$type": "color",
        "$description": "Meta, labels. >=3:1 contrast ratio.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.68 0.006 270deg)",
            "light": "#6B6460"
          }
        },
        "$value": "oklch(0.68 0.006 270deg)"
      },
      "chips": {
        "$type": "color",
        "$description": "Chip labels, uppercase caps text.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.78 0.006 270deg)",
            "light": "#8A847C"
          }
        },
        "$value": "oklch(0.78 0.006 270deg)"
      },
      "inverse": {
        "$type": "color",
        "$description": "Text on light surfaces within dark contexts (button labels on sage).",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.12 0.015 270deg)",
            "light": "oklch(0.962 0.010 80deg)"
          }
        },
        "$value": "oklch(0.12 0.015 270deg)"
      }
    },

    "border": {
      "base": {
        "$type": "color",
        "$description": "Card borders. Light = warm visible border ≈ #DCD5CA — never a ghost.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.28 0.010 270deg)",
            "light": "oklch(0.86 0.015 80deg)"
          }
        },
        "$value": "oklch(0.28 0.010 270deg)"
      },
      "subtle": {
        "$type": "color",
        "$description": "Hairlines / dividers. Light = ≈ #E8E2D8.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.22 0.008 270deg)",
            "light": "oklch(0.90 0.010 80deg)"
          }
        },
        "$value": "oklch(0.22 0.008 270deg)"
      }
    },

    "cta": {
      "$description": "Primary sage CTA button tokens",
      "bg-start":  { "$type": "color", "$value": "#7BA081" },
      "bg-end":    { "$type": "color", "$value": "#5F8266" },
      "fg":        { "$type": "color", "$value": "#F0EDE8", "$description": "Warm white — high contrast on sage both themes" }
    },

    "ai": {
      "$description": "AI/Lexi semantic role. Neutral grammar — card surface identical to elevated card. Teal (#54D6A4) is the AI dot accent. Amber is the WARNING accent. Dot-chip rule: colour lives only in the leading dot, never in chip bg or label text. One-accent-per-element: never coloured icon + coloured label on the same element.",
      "surface": {
        "$type": "color",
        "$description": "Identical to elevated panel (surface-1) — neutral, no amber tint",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.16 0.012 270deg)",
            "light": "#FFFFFF"
          }
        },
        "$value": "oklch(0.16 0.012 270deg)"
      },
      "border": {
        "$type": "color",
        "$description": "Neutral card border — same as standard elevated card",
        "$extensions": {
          "mode": {
            "dark":  "rgba(255,255,255,0.07)",
            "light": "#E2DDD6"
          }
        },
        "$value": "rgba(255,255,255,0.07)"
      },
      "accent": {
        "$type": "color",
        "$description": "Teal — the AI dot accent. Replaces amber-as-AI. Used in citation chip dots, streaming dot, teal dot in AI chip. Both themes: same #54D6A4.",
        "$extensions": {
          "mode": {
            "dark":  "#54D6A4",
            "light": "#54D6A4"
          }
        },
        "$value": "#54D6A4"
      },
      "text": {
        "$type": "color",
        "$description": "fg-secondary — neutral body copy. Never amber-tinted.",
        "$extensions": {
          "mode": {
            "dark":  "oklch(0.82 0.006 270deg)",
            "light": "#4A4641"
          }
        },
        "$value": "oklch(0.82 0.006 270deg)"
      },
      "icon-bg": {
        "$type": "color",
        "$description": "Icon container bg — neutral dark, warm-tinted light. One-accent-per-element rule. Light: warm parchment gradient #F6F1E9→#EFE9DF (NOT grey).",
        "$extensions": {
          "mode": {
            "dark":  "rgba(255,255,255,0.06)",
            "light": "linear-gradient(180deg,#F6F1E9,#EFE9DF)"
          }
        },
        "$value": "rgba(255,255,255,0.06)"
      }
    },

    "status": {
      "success": { "$type": "color", "$value": "oklch(0.60 0.100 150deg)" },
      "warning": { "$type": "color", "$value": "oklch(0.70 0.140 75deg)" },
      "danger":  { "$type": "color", "$value": "oklch(0.60 0.160 28deg)" },
      "info":    { "$type": "color", "$value": "oklch(0.65 0.170 270deg)" }
    }

  },

  "depth": {
    "$description": "Elevation and atmosphere depth tokens",

    "inset-highlight": {
      "$type": "shadow",
      "$description": "1px white top edge — Linear signature. Dark: rgba(255,255,255,0.08); Light: rgba(255,255,255,0.95)",
      "$extensions": {
        "mode": {
          "dark":  "inset 0 1px 0 rgba(255,255,255,0.08)",
          "light": "inset 0 1px 0 rgba(255,255,255,0.95)"
        }
      },
      "$value": "inset 0 1px 0 rgba(255,255,255,0.08)"
    },

    "orb-blur": { "$type": "dimension", "$value": "120px" },

    "orb-sage-light":  { "$type": "color", "$value": "rgba(107,143,113,0.20)",  "$description": "Light orb sage — bumped from 0.14 to 0.20 for felt presence" },
    "orb-blue-light":  { "$type": "color", "$value": "rgba(48,106,239,0.12)",   "$description": "Light orb blue — bumped from 0.08 to 0.12" },
    "orb-amber-light": { "$type": "color", "$value": "rgba(196,148,50,0.14)",   "$description": "Light orb amber — bumped from 0.10 to 0.14" },

    "grain-opacity-dark":  { "$type": "number", "$value": 0.04 },
    "grain-opacity-light": { "$type": "number", "$value": 0.04, "$description": "Bumped from 0.03 to 0.04 — multiply blend adds texture richness in light" }
  },

  "typography": {

    "fontFamily": {
      "display": {
        "$type": "fontFamily",
        "$value": ["Tiempos Headline", "Newsreader", "Georgia", "Times New Roman", "serif"],
        "$description": "Tiempos Headline (commercial, Klim). Newsreader (free interim). Always weight 400."
      },
      "sans": {
        "$type": "fontFamily",
        "$value": ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"]
      },
      "mono": {
        "$type": "fontFamily",
        "$value": ["Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "monospace"],
        "$description": "Berkeley Mono (commercial). JetBrains Mono (free interim)."
      }
    },

    "fontSize": {
      "hero":       { "$type": "dimension", "$value": "56px" },
      "display-lg": { "$type": "dimension", "$value": "36px" },
      "display":    { "$type": "dimension", "$value": "28px" },
      "title":      { "$type": "dimension", "$value": "20px" },
      "body":       { "$type": "dimension", "$value": "15px" },
      "meta":       { "$type": "dimension", "$value": "12px" },
      "chip":       { "$type": "dimension", "$value": "11px" }
    },

    "fontWeight": {
      "display":  { "$type": "fontWeight", "$value": 400, "$description": "Tiempos/Newsreader — NEVER bold" },
      "body":     { "$type": "fontWeight", "$value": 450, "$description": "Inter variable axis" },
      "medium":   { "$type": "fontWeight", "$value": 500 },
      "semibold": { "$type": "fontWeight", "$value": 600, "$description": "MAX ALLOWED — never higher" }
    },

    "letterSpacing": {
      "display":    { "$type": "dimension", "$value": "-0.03em" },
      "title":      { "$type": "dimension", "$value": "-0.02em" },
      "body":       { "$type": "dimension", "$value": "-0.01em" },
      "caps":       { "$type": "dimension", "$value": "0.09em" },
      "caps-wide":  { "$type": "dimension", "$value": "0.12em" },
      "mono":       { "$type": "dimension", "$value": "0.02em" }
    },

    "lineHeight": {
      "display": { "$type": "number", "$value": 1.05 },
      "tight":   { "$type": "number", "$value": 1.15 },
      "body":    { "$type": "number", "$value": 1.60 },
      "loose":   { "$type": "number", "$value": 1.75 }
    }

  },

  "spacing": {
    "$description": "8px-grid spacing scale. Avoid space-5 (20px) — use space-6 (24px).",
    "1":  { "$type": "dimension", "$value": "4px",  "$description": "Sub-grid micro-padding only" },
    "2":  { "$type": "dimension", "$value": "8px",  "$description": "Base grid unit" },
    "3":  { "$type": "dimension", "$value": "12px" },
    "4":  { "$type": "dimension", "$value": "16px" },
    "5":  { "$type": "dimension", "$value": "20px", "$description": "AVOID — use space-6 instead" },
    "6":  { "$type": "dimension", "$value": "24px" },
    "8":  { "$type": "dimension", "$value": "32px" },
    "10": { "$type": "dimension", "$value": "40px" },
    "12": { "$type": "dimension", "$value": "48px" },
    "16": { "$type": "dimension", "$value": "64px" },
    "20": { "$type": "dimension", "$value": "80px" },
    "24": { "$type": "dimension", "$value": "96px" }
  },

  "borderRadius": {
    "sm":   { "$type": "dimension", "$value": "4px",    "$description": "Chips, badges, kbd" },
    "md":   { "$type": "dimension", "$value": "8px",    "$description": "Buttons, inputs, nav items" },
    "lg":   { "$type": "dimension", "$value": "12px",   "$description": "Cards, panels, stat blocks" },
    "xl":   { "$type": "dimension", "$value": "14px",   "$description": "Chat input card" },
    "2xl":  { "$type": "dimension", "$value": "16px",   "$description": "Product frames, screenshots" },
    "full": { "$type": "dimension", "$value": "9999px", "$description": "Pills, avatars" }
  },

  "motion": {
    "ease": {
      "$type": "cubicBezier",
      "$value": [0.23, 1, 0.32, 1],
      "$description": "Primary ease — fast out, slow deceleration"
    },
    "ease-spring": {
      "$type": "cubicBezier",
      "$value": [0.34, 1.56, 0.64, 1],
      "$description": "Spring easing for interactive delight moments"
    },
    "enter": {
      "$type": "duration",
      "$value": "220ms",
      "$description": "Entry duration — generous reveal"
    },
    "exit": {
      "$type": "duration",
      "$value": "130ms",
      "$description": "Exit duration — snappy dismiss"
    },
    "press": {
      "$type": "duration",
      "$value": "80ms",
      "$description": "Button press / micro-interaction"
    }
  }

}