/*
  THEOS — Color Tokens
  ---------------------------------------------------------------
  Palette concept: "Stone & Ember."
  Stone = warm, low-chroma neutrals evoking matte plaster and quarried
  stone — the architectural, calm base of the system. Ember = the single
  accent hue, lifted directly from the wordmark's orange mark, used with
  restraint. Ink is a true near-black for text and high-contrast surfaces.

  All base scales run 25 (lightest) → 950 (darkest) and are authored in
  OKLCH for perceptual evenness, then pinned to a hex fallback. Semantic
  aliases below are what components should consume — never reach for a
  numbered stone/ember value directly in product work.
*/

:root {
  /* ---------- Ink (true neutral — text, high-contrast ink) ---------- */
  --ink-0: #ffffff;
  --ink-950: #1e1e1e;   /* brand ink, matches wordmark */
  --ink-1000: #141414;

  /* ---------- Stone (warm neutral scale — surfaces, borders) ---------- */
  --stone-25: oklch(98.5% 0.004 80);   /* #fbfaf8 */
  --stone-50: oklch(96.8% 0.006 75);   /* #f5f1ec */
  --stone-100: oklch(93.8% 0.009 73);  /* #ede7df */
  --stone-200: oklch(88.9% 0.013 70);  /* #e0d8cc */
  --stone-300: oklch(79.5% 0.019 68);  /* #cbbfaf */
  --stone-400: oklch(66.4% 0.021 64);  /* #a79c8a */
  --stone-500: oklch(55.8% 0.021 61);  /* #8a7f6e */
  --stone-600: oklch(44.6% 0.019 58);  /* #6b6156 */
  --stone-700: oklch(34.1% 0.016 55);  /* #504840 */
  --stone-800: oklch(23.9% 0.012 52);  /* #38322c */
  --stone-900: oklch(15.9% 0.008 50);  /* #241f1b */
  --stone-950: oklch(12.5% 0.004 50);  /* #1a1714 */

  /* ---------- Ember (brand accent — from wordmark orange) ---------- */
  --ember-50: oklch(96.4% 0.024 55);   /* #fef3ec */
  --ember-100: oklch(91.5% 0.052 50);  /* #fce1cc */
  --ember-200: oklch(83.6% 0.096 46);  /* #f9c199 */
  --ember-300: oklch(75.9% 0.130 43);  /* #f5a066 */
  --ember-400: oklch(70.1% 0.155 41);  /* #f38b42 */
  --ember-500: oklch(64.5% 0.176 39);  /* #f36d1f — brand base */
  --ember-600: oklch(56.4% 0.170 36);  /* #da5710 */
  --ember-700: oklch(46.8% 0.148 33);  /* #b4440d */
  --ember-800: oklch(37.4% 0.118 32);  /* #8c350c */
  --ember-900: oklch(29.9% 0.090 32);  /* #6b290b */

  /* ---------- Semantic hues (muted, harmonious with Stone/Ember) ---------- */
  --sage-500: oklch(52.3% 0.084 149);   /* success — #3f7d58 */
  --sage-100: oklch(93.2% 0.030 149);
  --sage-700: oklch(36.8% 0.070 149);

  --gold-500: oklch(59.6% 0.118 78);    /* warning — #b8862f, distinct from ember */
  --gold-100: oklch(94.8% 0.038 78);
  --gold-700: oklch(42.1% 0.092 78);

  --brick-500: oklch(48.9% 0.120 25);   /* danger — #b23b3b */
  --brick-100: oklch(93.0% 0.026 25);
  --brick-700: oklch(35.4% 0.100 25);

  /* ================================================================
     SEMANTIC TOKENS — light mode (default)
     Consume these, not the raw scales above.
     ================================================================ */

  /* Foreground / text */
  --fg-primary: var(--ink-950);
  --fg-secondary: var(--stone-600);
  --fg-tertiary: var(--stone-500);
  --fg-disabled: var(--stone-400);
  --fg-inverse: var(--stone-25);
  --fg-accent: var(--ember-600);
  --fg-on-accent: var(--stone-25);
  --fg-success: var(--sage-700);
  --fg-warning: var(--gold-700);
  --fg-danger: var(--brick-700);
  --fg-link: var(--ember-700);
  --fg-link-hover: var(--ember-800);

  /* Background */
  --bg-page: var(--stone-25);
  --bg-canvas: var(--stone-50);
  --bg-inverse: var(--ink-950);

  /* Surface (cards, panels, inputs) */
  --surface-1: #ffffff;              /* resting card on page */
  --surface-2: var(--stone-50);      /* nested / secondary surface */
  --surface-3: var(--stone-100);     /* pressed / recessed surface */
  --surface-accent: var(--ember-50);
  --surface-accent-strong: var(--ember-500);
  --surface-success: var(--sage-100);
  --surface-warning: var(--gold-100);
  --surface-danger: var(--brick-100);
  --surface-inverse: var(--ink-950);
  --surface-inverse-2: var(--stone-900);

  /* Border / divider */
  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong: var(--stone-400);
  --border-accent: var(--ember-500);
  --border-focus: var(--ink-950);
  --divider: var(--stone-200);

  /* Overlay (scrims behind modals / drawers) */
  --overlay-scrim: oklch(15.9% 0.008 50 / 0.45);
  --overlay-scrim-heavy: oklch(15.9% 0.008 50 / 0.72);

  /* Opacity tokens */
  --opacity-disabled: 0.4; /* @kind other */
  --opacity-hover-tint: 0.06; /* @kind other */
  --opacity-press-tint: 0.1; /* @kind other */
  --opacity-divider-on-dark: 0.12; /* @kind other */

  /* Glass tokens — used ONLY for true floating surfaces above content:
     command palette, AI composer, floating toolbars. Never on static cards. */
  --glass-bg: oklch(98.5% 0.004 80 / 0.72);
  --glass-border: oklch(100% 0 0 / 0.6);
  --glass-bg-dark: oklch(12.5% 0.004 50 / 0.65);
  --glass-border-dark: oklch(100% 0 0 / 0.08);

  /* Gradient tokens — subtle, tonal, never a rainbow / brand-hue sweep */
  --gradient-stone: linear-gradient(180deg, var(--stone-25) 0%, var(--stone-100) 100%);
  --gradient-ember-wash: linear-gradient(135deg, var(--ember-50) 0%, var(--stone-25) 60%);
  --gradient-ink-fade: linear-gradient(180deg, oklch(12.5% 0.004 50 / 0) 0%, oklch(12.5% 0.004 50 / 0.9) 100%); /* @kind other */
  --gradient-ember-solid: linear-gradient(135deg, var(--ember-400) 0%, var(--ember-600) 100%); /* @kind other */
}

/* ================================================================
   DARK MODE — attribute-scoped theme, mirrors the semantic layer only.
   Toggle with data-theme="dark" on <html> or any container.
   ================================================================ */
[data-theme="dark"] {
  --fg-primary: var(--stone-50);
  --fg-secondary: var(--stone-300);
  --fg-tertiary: var(--stone-400);
  --fg-disabled: var(--stone-600);
  --fg-inverse: var(--ink-950);
  --fg-accent: var(--ember-400);
  --fg-on-accent: var(--ink-1000);
  --fg-success: oklch(75% 0.11 149);
  --fg-warning: oklch(78% 0.10 78);
  --fg-danger: oklch(74% 0.11 25);
  --fg-link: var(--ember-400);
  --fg-link-hover: var(--ember-300);

  --bg-page: var(--ink-950);
  --bg-canvas: var(--stone-950);
  --bg-inverse: var(--stone-25);

  --surface-1: var(--stone-900);
  --surface-2: var(--stone-800);
  --surface-3: var(--stone-700);
  --surface-accent: oklch(29.9% 0.090 32 / 0.35);
  --surface-accent-strong: var(--ember-500);
  --surface-success: oklch(30% 0.06 149 / 0.35);
  --surface-warning: oklch(32% 0.07 78 / 0.35);
  --surface-danger: oklch(30% 0.07 25 / 0.35);
  --surface-inverse: var(--stone-25);
  --surface-inverse-2: var(--stone-100);

  --border-subtle: var(--stone-800);
  --border-default: var(--stone-700);
  --border-strong: var(--stone-600);
  --border-accent: var(--ember-500);
  --border-focus: var(--stone-50);
  --divider: var(--stone-800);

  --overlay-scrim: oklch(5% 0 0 / 0.6);
  --overlay-scrim-heavy: oklch(5% 0 0 / 0.8);

  --glass-bg: var(--glass-bg-dark);
  --glass-border: var(--glass-border-dark);

  --gradient-stone: linear-gradient(180deg, var(--stone-950) 0%, var(--stone-900) 100%);
  --gradient-ember-wash: linear-gradient(135deg, oklch(29.9% 0.090 32 / 0.4) 0%, var(--stone-950) 60%);
}