/* ==========================================================================
   Design tokens — TB<3 (WP-0.5r2: primary colours, free-flowing)
   Direction: ADR-0001 #22, plan §10. Spec: docs/architecture/design-system.md
   Install target: app/static/design-tokens.css (engineer, WP-5.1)

   Self-contained: custom properties plus `color-scheme` only. No selectors
   that style components (reference component CSS is in design-preview.html).

   Theme resolution (highest wins):
     1. <html data-theme="light"> or <html data-theme="dark">  (manual override)
     2. prefers-color-scheme: dark                                (OS setting)
     3. light defaults below
   Ratios in comments are WCAG 2.x contrast, computed (spec §3.5).

   Colours deliberately depart from the Ten Five style guide (ADR-0001 #22).
   The Ten Five logo is still used unmodified from docs/brand/.

   Fonts: IBM Plex Sans 400/500/700 + IBM Plex Mono 400/500 (SIL OFL 1.1).
   This file does not load fonts; the host page does.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Base ------------------------------------------------------------- */
  --color-bg:        #FFFFFF;   /* page: white */
  --color-tint:      #F5F5F3;   /* soft ground where truly needed: composer, Sam's messages, secondary buttons, readiness */
  --color-tint-2:    #EBEBE8;   /* pressed / hover on tint */

  /* ---- Text ------------------------------------------------------------- */
  --color-text:      #111111;   /* 18.88 bg · 17.30 tint · 15.81 tint-2 */
  --color-muted:     #5C5C5C;   /* captions, labels, placeholder: 6.69 bg · 6.13 tint */

  /* ---- Primary accents (each has one job; see spec §3.2) --------------- */
  --color-red:       #D7192D;   /* the "<3", Write mode (text/lines): 5.16 bg · 4.73 tint */
  --color-red-fill:  #D7192D;   /* Write segment fill; white label 5.16 */
  --color-blue:      #1F4ED8;   /* links, Chat label, focus ring: 6.69 bg · 6.13 tint */
  --color-blue-fill: #1F4ED8;   /* Chat segment fill; white label 6.69 */
  --color-yellow:    #FFC823;   /* marker only: quote highlight, selection. Never text; ink on it 12.17 */
  --color-on-fill:   #FFFFFF;   /* label on red/blue fills */
  --color-on-yellow: #111111;   /* always ink on yellow, both themes */

  /* ---- Actions ---------------------------------------------------------- */
  /* Primary button: red -> orange -> yellow gradient with an ink label (ADR-0001 #27).
     Ink #111111 on every point of the gradient >= 6.10 (base) / 5.21 (hover). Same in both themes. */
  --btn-stop-1:      #FF5A3C;   /* vermilion: ink 6.10 */
  --btn-stop-2:      #FF8C1A;   /* orange:    ink 8.11 */
  --btn-stop-3:      #FFC823;   /* yellow:    ink 12.17 */
  --btn-stop-1-hover: #F24A2E;  /* ink 5.21 */
  --btn-stop-2-hover: #FF7E0F;  /* ink 7.41 */
  --btn-stop-3-hover: #FFBE14;  /* ink 11.35 */
  --btn-bg:          linear-gradient(90deg, var(--btn-stop-1), var(--btn-stop-2) 55%, var(--btn-stop-3));
  --btn-bg-hover:    linear-gradient(90deg, var(--btn-stop-1-hover), var(--btn-stop-2-hover) 55%, var(--btn-stop-3-hover));
  --btn-fg:          #111111;   /* ink label, both themes */

  /* Press flame (8-bit fire burst, spec §10.8). Index 0 = transparent. */
  --flame-1:         #8E1B0E;   /* ember */
  --flame-2:         #D7301F;   /* red */
  --flame-3:         #F26419;   /* orange */
  --flame-4:         #FFA51F;   /* amber */
  --flame-5:         #FFE15A;   /* tip */
  --flame-cell:      6px;       /* one fire pixel */
  --flame-rows:      12;        /* 72 px tall */
  --flame-duration:  520ms;
  --ink-fill:        #111111;   /* ticked sets (state, not action) */
  --on-ink:          #FFFFFF;   /* 18.88 */

  /* ---- Lines (rare) ----------------------------------------------------- */
  --color-control:   #767676;   /* textarea + set-tick boundaries: 4.54 bg · 4.16 tint */
  --color-hairline:  #E8E8E6;   /* optional, decorative only (1.23); not used by default */

  /* ---- Error (distinct from brand red by treatment, spec §3.3) --------- */
  --color-error-icon: #D7192D;  /* alert-triangle icon only; message text stays --color-text */

  /* ---- Focus and selection --------------------------------------------- */
  --color-focus:     var(--color-blue);
  --focus-ring:      0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --selection-bg:    var(--color-yellow);
  --selection-fg:    var(--color-on-yellow);

  /* ---- Logo (docs/brand/ten-five-engineering-logo.svg, never edited) --- */
  --logo-filter:     none;      /* dark theme inverts the rendered image (spec §7.2) */

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --text-label:   0.75rem;    /* 12 — mono eyebrows, timestamps */
  --text-caption: 0.8125rem;  /* 13 — captions, provenance */
  --text-body:    1rem;       /* 16 — body, chat, buttons */
  --text-title:   1.375rem;   /* 22 — block titles, quote */
  --text-display: 2rem;       /* 32 — page title (rare) */
  --text-wordmark: 1.25rem;   /* 20 — TB<3 */

  --leading-body:  1.5;
  --leading-title: 1.25;
  --tracking-title: -0.015em;
  --tracking-label:  0.06em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---- Touch targets ---------------------------------------------------- */
  --tap-min:     44px;
  --tap-primary: 48px;
  --tap-gap:     8px;

  /* ---- Shape (softer, less rigid) -------------------------------------- */
  --radius-sm:   6px;    /* buttons, inputs, segments */
  --radius-md:   12px;   /* message blocks, composer, popover */
  --radius-full: 999px;  /* set ticks, readiness, mode-switch track */
  --edge-accent: 3px;    /* Write edge on Sam's Write messages */

  /* ---- Elevation (only floating layers) -------------------------------- */
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);

  /* ---- Motion ----------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --motion-rise:   4px;
  --press-scale:   0.98;

  /* ---- Layout ----------------------------------------------------------- */
  --content-max: 40rem;
}

/* ---- Dark theme: OS preference (unless manually forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:        #0B0B0C;   /* near-black */
    --color-tint:      #18181A;
    --color-tint-2:    #232326;

    --color-text:      #EDEDED;   /* 16.80 bg · 15.14 tint · 13.39 tint-2 */
    --color-muted:     #A3A3A3;   /* 7.80 bg · 7.03 tint */

    --color-red:       #FF4757;   /* 5.89 bg · 5.31 tint */
    --color-red-fill:  #D9283C;   /* white label 4.86; 4.05 vs bg */
    --color-blue:      #7FA0FF;   /* 7.85 bg · 7.07 tint */
    --color-blue-fill: #3366FF;   /* white label 4.68; 4.20 vs bg */
    --color-yellow:    #FFD23F;   /* ink on it 13.08 */

    --ink-fill:        #EDEDED;
    --on-ink:          #0B0B0C;   /* 16.80 */

    --color-control:   #7E7E82;   /* 4.87 bg · 4.39 tint */
    --color-hairline:  #26262A;

    --color-error-icon: #FF4757;

    --logo-filter:     invert(1); /* #231F20 ink renders as #DCE0DF: 14.77 on bg */

    --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* ---- Dark theme: manual override (identical values; keep in sync) ------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:        #0B0B0C;
  --color-tint:      #18181A;
  --color-tint-2:    #232326;

  --color-text:      #EDEDED;
  --color-muted:     #A3A3A3;

  --color-red:       #FF4757;
  --color-red-fill:  #D9283C;
  --color-blue:      #7FA0FF;
  --color-blue-fill: #3366FF;
  --color-yellow:    #FFD23F;

  --ink-fill:        #EDEDED;
  --on-ink:          #0B0B0C;

  --color-control:   #7E7E82;
  --color-hairline:  #26262A;

  --color-error-icon: #FF4757;

  --logo-filter:     invert(1);

  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---- Manual light override: light values are the :root defaults ------- */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --motion-rise:   0px;
    --press-scale:   1;
    --flame-duration: 0ms;    /* no flame: the button shows its static pressed state only */
  }
}