/* ---------------------------------------------------------------------------
   PostLane color tokens — "The Studio Workshop"
   ---------------------------------------------------------------------------
   Color space: OKLCH. Warm-tinted neutrals (hue 85, the workshop's amber
   undertone, present at chroma 0.005-0.01 so it never reads as "yellow,"
   just warm). One loud accent: Klein Blue. Four status colors, each with a
   "soft" tinted background. Never raw #fff / #000.

   Canonical display names live alongside the machine-friendly variable names:
     --bg            Workshop White        --fg          Ink
     --bg-subtle     Bench Cream           --fg-muted     Muted Ink
     --surface       Studio Surface        --fg-subtle    Subtle Ink
     --surface-sunken Sunken Surface       --accent       Klein Blue
     --border        Toolmark Border       --success      Calibration Green
     --border-strong Strong Border         --warning      Workshop Amber
                                           --danger       Stop Red
                                           --info         Console Blue
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* ---- Surfaces: page → subtle fill → elevated surface → sunken inset ---- */
  --bg: oklch(99% 0.005 85);            /* Workshop White — page background */
  --bg-subtle: oklch(96% 0.008 85);     /* Bench Cream — table headers, sunken fills */
  --surface: oklch(100% 0 0);           /* Studio Surface — cards, dialogs, popovers */
  --surface-elevated: oklch(100% 0 0);
  --surface-sunken: oklch(97% 0.006 85);/* Sunken Surface — code blocks, board bg */

  /* ---- Borders ---- */
  --border: oklch(91% 0.008 85);        /* Toolmark Border — default separation */
  --border-strong: oklch(82% 0.01 85);  /* Strong Border — hover + field borders */

  /* ---- Text hierarchy ---- */
  --fg: oklch(20% 0.01 85);             /* Ink — primary text, warm near-black */
  --fg-muted: oklch(45% 0.008 85);      /* Muted Ink — secondary, labels, meta */
  --fg-subtle: oklch(56% 0.008 85);     /* Subtle Ink — tertiary, placeholder (AA-safe) */

  /* ---- Brand accent: Klein Blue (the workshop's one loud color) ----
     Adopted 2026-07-12: "Klein, brightened" — International Klein Blue's
     character (deep, violet-undertone blue) lifted for UI legibility.
     hue 264, chroma 0.24, L 44% ≈ #0436D3. Visible at <=15%
     of any screen. Swap this one token per-studio to retenant the accent. */
  --accent: oklch(44% 0.24 264);
  --accent-hover: oklch(38% 0.22 264);
  --accent-soft: oklch(95.5% 0.033 264); /* quiet mode: tag bg, selection, hover rows */
  --accent-fg: oklch(99% 0.005 85);     /* near-white text on accent fills */

  /* ---- Amber sub-brand (video storage & review) — "Sienna" variant ----
     Fixed identity constants — do NOT change between light and dark. The
     interactive accent ROLE swaps to sienna inside `.amber-brand`; these raw
     tokens are for the bright decorative moments (the mark, play buttons).
     Sienna spec (2026-07): pushed toward red-brown — earthy, gemstone-like,
     most distinct from PostLane's Klein Blue. Hex values are authoritative. */
  --amber-core: #B0592B;   /* Sienna core — primary, the mark */
  --amber-honey: #C2733A;  /* Sienna honey — fills, chips */
  --amber-glow: #D88E56;   /* Sienna glow — highlight, accent-on-dark */
  --amber-deep: #793C19;   /* Sienna deep — hover, text-on-sienna */
  --amber-ground: oklch(16% 0.02 45);  /* review backdrop — deep warm red-brown */

  /* ---- Status: information, never decoration. Each pairs with a soft bg.
     Uniform derivation: every soft variant = L 96 + chroma 0.04 (light). ---- */
  --success: oklch(60% 0.15 145);       /* Calibration Green — on-track, healthy */
  --success-soft: oklch(96% 0.04 145);
  --success-fg: oklch(99% 0.005 85);
  --warning: oklch(70% 0.16 75);        /* Workshop Amber — tight capacity, near-deadline */
  --warning-soft: oklch(96% 0.05 75);
  --warning-fg: oklch(25% 0.03 75);
  --danger: oklch(58% 0.20 27);         /* Stop Red — overload, overdue, destructive */
  --danger-soft: oklch(96% 0.04 27);
  --danger-fg: oklch(99% 0.005 85);
  --info: oklch(60% 0.17 245);          /* Console Blue — info, AI suggestions */
  --info-soft: oklch(96% 0.04 245);
  --info-fg: oklch(99% 0.005 85);

  --ring: var(--accent);

  /* ---- Overlay scrim (promoted 2026-07-13, was a documented literal) ---- */
  --scrim: oklch(20% 0.01 85 / 0.45);

  /* ---- Disabled controls: one dial (55%); pair with cursor:not-allowed
     and the disabled-with-tooltip law — never hidden. ---- */
  --opacity-disabled: 0.55; /* @kind other */
}

/* ---- Dark theme: deep warm-tinted, slight amber undertone ---- */
.dark {
  --bg: oklch(15% 0.01 85);
  --bg-subtle: oklch(19% 0.012 85);
  --surface: oklch(17% 0.011 85);
  --surface-elevated: oklch(21% 0.013 85);
  --surface-sunken: oklch(13% 0.009 85);

  --border: oklch(28% 0.012 85);
  --border-strong: oklch(38% 0.014 85);

  --fg: oklch(96% 0.005 85);
  --fg-muted: oklch(70% 0.008 85);
  --fg-subtle: oklch(54% 0.008 85);

  --accent: oklch(62% 0.19 264);        /* lifted L so the chip pops on warm-dark */
  --accent-hover: oklch(68% 0.17 264);
  --accent-soft: oklch(27% 0.09 264);
  --accent-fg: oklch(99% 0.005 85);

  --success: oklch(68% 0.16 145);
  --success-soft: oklch(20% 0.06 145);
  --warning: oklch(76% 0.15 75);
  --warning-soft: oklch(20% 0.06 75);
  --warning-fg: oklch(96% 0.02 85);
  --danger: oklch(66% 0.18 27);
  --danger-soft: oklch(22% 0.06 27);
  --info: oklch(68% 0.16 245);
  --info-soft: oklch(22% 0.06 245);

  --ring: var(--accent);

  --scrim: oklch(8% 0.01 85 / 0.6); /* heavier on dark — overlays need more separation */
}

/* ---- Amber sub-brand scope. Wrap any Amber surface in `.amber-brand` and
   the accent ROLE swaps blue→sienna for everything inside (buttons, links,
   chips, focus rings) with no primitive rewrites. ---- */
.amber-brand {
  --accent: var(--amber-core);
  --accent-hover: var(--amber-deep);
  --accent-soft: oklch(95% 0.03 55);
  --accent-fg: oklch(99% 0.006 85);
  --ring: var(--amber-glow);
  /* Draw-on-frame annotation ink (2026-07-13). Default = sienna glow, 3px,
     round caps, no casing. Reviewer may switch to an identity-palette color
     or white (persisted per-user; the app sets this property on the review
     surface). */
  --annotation: var(--amber-glow);
}
/* Dark-mode sienna sub-brand: in a class-based dark theme, brighten the
   sienna accent for warm-dark surfaces by re-declaring these tokens on the
   SAME element that carries `.amber-brand` (e.g. <div class="amber-brand"
   data-theme="dark">) so the override stays a single, registrable scope:
     --accent: var(--amber-glow);  --accent-hover: var(--amber-honey);
     --accent-soft: oklch(28% 0.05 45); --accent-fg: oklch(18% 0.02 45);
     --ring: var(--amber-glow);
   The base values above remain legible in both themes by default. */

/* ---- OKLCH fallback for the long tail of old browsers (not color-accurate;
   the OKLCH values above are canonical). ---- */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --bg: #fefdfb; --bg-subtle: #f6f5f0; --surface: #ffffff;
    --surface-elevated: #ffffff; --surface-sunken: #faf9f5;
    --border: #e7e5dd; --border-strong: #ccc8ba;
    --fg: #2a2925; --fg-muted: #6a685f; --fg-subtle: #88857a;
    --accent: #0436d3; --accent-hover: #0026b4; --accent-soft: #e5f1ff; --accent-fg: #ffffff;
    --amber-core: #B0592B; --amber-honey: #C2733A; --amber-glow: #D88E56;
    --amber-deep: #793C19; --amber-ground: #221008;
    --success: #3f8f5b; --success-soft: #ecf6ef;
    --warning: #c98a16; --warning-soft: #f8f1e4;
    --danger: #c0392b; --danger-soft: #f8ebe9;
    --info: #2f74c0; --info-soft: #e9f1f9;
  }
}