/* ============================================================
   Time Sellers — Color tokens
   Dark only (:root) — the product has no light theme and no
   `prefers-color-scheme` branch. Generated into the design system's
   tokens.json (design-system/tools/gen-tokens.mjs).
   ============================================================ */
:root {
  /* ---- Brand blue (primary action, from landing CTA #2F6FEE) ---- */
  --blue-300: #8FB0F7;
  --blue-400: #5B8CF2;
  --blue-500: #2F6FEE;   /* primary */
  --blue-600: #2A62D4;   /* hover */
  --blue-700: #2453B4;   /* active */

  /* ---- Azure (logo mark, "Use AI." gradient tail, accent glow) ---- */
  --azure-300: #9AD3F6;
  --azure-400: #5FC0F2;
  --azure-500: #38A8EC;
  --azure-600: #2A90D4;

  /* ---- Mascot accents (from crt-buddies.js — personality layer) ---- */
  --m-indigo: #7C8CF8;   --m-indigo-deep: #5F6EE0;   --m-indigo-soft: #A5B1FF;
  --m-mint:   #5FC9A9;   --m-mint-deep:   #43AD8E;   --m-mint-soft:   #A8E6D2;
  --m-coral:  #F58E77;   --m-coral-deep:  #D96F58;   --m-coral-soft:  #FFC0AE;
  --m-pink:   #EF92C8;   --m-pink-deep:   #D274AA;   --m-pink-soft:   #F7C2E2;
  --m-gold:   #EDB94F;   --m-gold-deep:   #CE9A33;   --m-gold-soft:   #F7DFA8;
  --m-sky:    #74B6EC;   --m-sky-deep:    #4A90CC;   --m-sky-soft:    #BFE0FA;
  --m-screen: #252B3D;   /* CRT screen face */
  --m-eye:    #BFF0FF;   /* CRT eye/mouth glow */
  --m-ink:    #33322D;   /* mascot outline warm-black */
  --m-bezel:  #EDECE5;   /* CRT bezel cream */

  /* ---- Semantic status ---- */
  --green-400: #5FC9A9;  --green-500: #43AD8E;   /* success / money */
  --green-700: #1E7A58;  /* deep green — text on light tints */
  --amber-400: #F7DFA8;  --amber-500: #F2C230;   /* warning / draft */
  /* Danger (crimson, the design of 2026-10-15). 400 / 500 / 600 are the
     design's values, unchanged: fills, borders, icons, status dots (400 the shadcn
     --destructive, 500 destructive accents, 600 solid buttons / hover). White
     text on them passes AA: 5.37 / 5.16 / 6.98 :1. They are NOT text colours
     on dark: the design's "≥ 4.5:1" note was wrong — crimson 400 reads 3.69:1
     on --bg, 3.36:1 on a card, 2.95:1 on the app glow.
     300 is ours: DANGER TEXT ONLY, via --text-danger. RATIFIED by Radek,
     2026-10-15 (afternoon), exactly #D13F5E — a crimson a step lighter than
     400 (OKLCH L 0.587, C 0.182, h 12.5; 400 is L 0.552, C 0.204, h 19.1),
     replacing the morning's lighter value, which cleared AA but read pink.
     It is NOT WCAG AA (4.5:1) on most dark surfaces; Radek accepted the
     shortfall. Measured (WCAG 2.x), the surfaces error text can sit on:
       --surface-inset 4.58 · --bg 4.32 · sheet #0B0B0E 4.29 ·
       --bg-subtle/popover 4.14 · --surface/card 3.94 · --surface-raised 3.71 ·
       glass menu over the glow 3.67 · app glow peak (--glow-app over --bg)
       3.46 · a destructive/20 tint over a card 3.42.
     (Crimson 400 as text, for comparison: 3.69 on --bg, 3.36 on a card.)
     Not on a hover fill (--surface-hover 3.28): rows that hover carry
     actions, and actions stay crimson 400.
     Pinned, ratios included, by web/test/design-danger-text.test.ts. */
  --red-300:   #D13F5E;
  --red-400:   #CE213F;  --red-500:   #D41F3F;   --red-600: #B0172F;

  /* ---- Tile tints — a row tile's hue (`.sc-row-icon[data-tone]`,
     cards/blocks.css): the Files card's file-type tiles and the feed card's
     unusable-skill tile. Tailwind's palette steps, as the design draws them:
     the fill is the hue's 500 at 15%, the glyph/label its 300. Tile tints
     only, NOT status colours (danger text is --text-danger, fills
     --destructive). The 300 on its tint over the card face the rows sit on
     (--surface-inset, black), WCAG 2.x: violet 10.13 · sky 10.83 · emerald
     11.75 · amber 12.05 · red 9.82 :1. Pinned, ratios included, by
     web/test/design-row-icon-tone.test.ts. */
  --tile-violet-bg:  oklch(0.606 0.25 292.717 / 0.15);
  --tile-violet-fg:  oklch(0.811 0.111 293.571);
  --tile-sky-bg:     oklch(0.685 0.169 237.323 / 0.15);
  --tile-sky-fg:     oklch(0.828 0.111 230.318);
  --tile-emerald-bg: oklch(0.696 0.17 162.48 / 0.15);
  --tile-emerald-fg: oklch(0.845 0.143 164.978);
  --tile-amber-bg:   oklch(0.769 0.188 70.08 / 0.15);
  --tile-amber-fg:   oklch(0.879 0.169 91.605);
  --tile-red-bg:     oklch(0.637 0.237 25.331 / 0.15);
  --tile-red-fg:     oklch(0.808 0.114 19.571);

  /* ---- Warm neutral scale (sand) — mascot warmth, light details ---- */
  --sand-50:  #FBFAF7;
  --sand-100: #F2F0EA;
  --sand-200: #EDECE5;
  --sand-300: #DBD8CE;
  --sand-400: #C9C5B8;
  --sand-500: #9A978E;
  --sand-600: #6E6B62;
  --sand-700: #4A4840;
  --sand-800: #33322D;
  --sand-900: #1F1E1A;

  /* ---- Cool near-black scale (ink) — dark surfaces ---- */
  --ink-950: #0A0A0C;
  --ink-900: #101014;
  --ink-850: #16161B;
  --ink-800: #1B1C21;
  --ink-700: #26262C;
  --ink-600: #33343B;
  --ink-500: #4A4B53;

  /* ============ SEMANTIC ALIASES ============ */
  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --surface:       var(--ink-850);
  --surface-raised:var(--ink-800);
  --surface-hover: var(--ink-700);
  --surface-inset: #000000;

  /* NAMING CAUTION: --border (hairline) and --accent (brand blue) keep their
     Time Sellers meanings. The shadcn bridge (shadcn-theme.css) never
     redefines them; Tailwind's `accent` colour maps to --surface-hover in
     tailwind-theme.css instead. */
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  /* A focused text field's or dropdown trigger's border (Radek's ruling
     2026-10-15): the bright warm white the design's in-card inputs and
     sign-in code boxes already drew (--text at 70%). Resting fields keep
     --border-strong (shadcn --input); an invalid field stays crimson,
     focused or not. Fields never get a ring. */
  --border-focus:  rgba(246,245,241,0.7);
  --border-accent: var(--blue-500);

  --text:          #F6F5F1;
  --text-muted:    #A3A3A6;
  --text-subtle:   #6E6C64;
  --text-on-accent:#FFFFFF;
  --text-danger:   var(--red-300);  /* error / danger TEXT (Tailwind `text-danger`); never a fill */

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-soft:   rgba(47,111,238,0.16);
  --accent-text:   #3E9FD1;   /* links, highlighted words */
  --focus-ring:    rgba(255,255,255,0.22);  /* neutral; blue borders are reserved for the AI chat composer */

  --money:         var(--green-400);

  /* ---- Scrollbars (barely-there on dark) ---- */
  --scrollbar-thumb:       rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.20);

  /* ---- Gradients ---- */
  --gradient-brand:  linear-gradient(92deg, var(--azure-500) 0%, var(--blue-500) 100%);
  --gradient-mark:   linear-gradient(135deg, var(--azure-400) 0%, var(--blue-500) 100%);
  --gradient-useai:  linear-gradient(100deg, #EAF4FF 0%, var(--azure-500) 52%, var(--blue-500) 100%);
  /* ambient page glow used behind the hero */
  --glow-hero: radial-gradient(60% 50% at 50% 0%, rgba(47,111,238,0.14) 0%, rgba(47,111,238,0) 70%);
  /* the app backdrop's bottom blue glow (Studio + customer app share it) */
  --glow-app: radial-gradient(ellipse 80% 60% at 50% 100%, rgb(27 47 156 / 0.5), transparent 70%);
}