/* ==========================================================================
   Cerberus — token layer
   Every color, radius, easing and elevation in the product resolves here.
   Nothing downstream may hardcode a literal color.

   Palette rationale
   -----------------
   Every neutral is tinted toward the brand hue **265** at chroma <= 0.02: the
   grounds, the text tiers, the hairlines and the shadow tint all come from one
   family, so nothing ever reads as a dirty grey against anything else. These
   are LogPose's grounds, inherited unchanged: the two are one product family
   and should read as one.

   The interaction accent is built from a ten-step ramp (--red-50 .. --red-900,
   below) anchored on the darkest of logo.svg's three gradations: --red-600 is
   that color almost exactly (oklch(47% 0.170 20) ~= #a51c30 ~= the logo's
   #A51C2F). The ramp keeps that swatch's own chroma at every step instead of
   flattening it, which is what makes it read as red rather than as brown --
   brown is what a dark, low-chroma red becomes, and chroma is exactly what an
   earlier pass of this file traded away. --accent uses --red-600 in light mode
   (7.5:1 against white) and the lighter, still-saturated --red-400 in dark
   mode.

   That hue (~20) sits close to --bad's (25) on the wheel, so separation from
   the error signal is carried by lightness rather than hue: --accent is
   noticeably darker than --bad in light mode and the two are never adjacent in
   the same view (--bad is reserved for status, --accent for identity and
   interaction). Don't pull this ramp's hue toward --bad's without re-checking
   that they still read as two different signals.

   Status hues are reserved for state. They are never decoration.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- surfaces: 5 stacked planes, deepest first ---------------------- */
  --bg-base:      oklch(98.5% 0.003 265);  /* the app ground */
  --bg-sunken:    oklch(94.5% 0.008 265);  /* wells, inset tracks */
  --bg-surface:   oklch(100% 0 0);         /* panels sitting on the ground */
  --bg-raised:    oklch(96.5% 0.005 265);  /* rows on hover, chips */
  --bg-chrome:    oklch(100% 0 0);         /* solid chrome: topbar, filter bar */
  --bg-glass:     oklch(100% 0 0 / 86%);   /* true glass: only surfaces that float */
  --bg-scrim:     oklch(0% 0 0 / 45%);

  /* ---- text tiers ------------------------------------------------------ */
  --fg-strong:    oklch(24% 0.020 265);
  --fg:           oklch(31% 0.018 265);
  --fg-muted:     oklch(50% 0.020 265);
  --fg-faint:     oklch(62% 0.018 265);

  /* ---- lines ---------------------------------------------------------- */
  --line:         oklch(90.5% 0.006 265);  /* hairline dividers */
  --line-strong:  oklch(89% 0.007 265);    /* control borders */
  --line-glass:   oklch(100% 0 0 / 70%);   /* bright edge on glass */

  /* ---- brand red ramp: constant hue 20, chroma carried through every step,
     anchored at --red-600 == the logo's darkest gradation ----------------- */
  --red-50:  oklch(97% 0.014 20);
  --red-100: oklch(93% 0.032 20);
  --red-200: oklch(87% 0.058 20);
  --red-300: oklch(79% 0.095 20);
  --red-400: oklch(68% 0.135 20);
  --red-500: oklch(57% 0.165 20);
  --red-600: oklch(47% 0.170 20);  /* == logo.svg's darkest red, #A51C2F */
  --red-700: oklch(39% 0.155 20);
  --red-800: oklch(31% 0.125 20);
  --red-900: oklch(23% 0.090 20);

  /* ---- accent (interaction only) -------------------------------------- */
  --accent:       var(--red-600);
  --accent-hover: var(--red-700);
  --accent-fg:    oklch(99% 0.004 20);
  --accent-wash:  oklch(47% 0.170 20 / 11%);
  --accent-edge:  oklch(47% 0.170 20 / 34%);
  --ring:         var(--red-600);

  /* ---- status --------------------------------------------------------- */
  --ok:           oklch(50% 0.135 150);
  --warn:         oklch(58% 0.140 72);
  --bad:          oklch(54% 0.195 25);
  --info:         oklch(50% 0.145 250);

  /* ---- log levels (badge text + dot + icon share one hue) ------------- */
  --lv-debug:     oklch(56% 0.022 265);
  --lv-info:      oklch(50% 0.145 250);
  --lv-warning:   oklch(60% 0.140 72);
  --lv-error:     oklch(54% 0.195 25);
  --lv-critical:  oklch(43% 0.185 12);

  /* ---- run status ----------------------------------------------------- */
  --st-running:   oklch(58% 0.140 72);
  --st-completed: oklch(50% 0.135 150);
  --st-failed:    oklch(54% 0.195 25);
  --st-cancelled: oklch(62% 0.018 265);

  /* ---- code / json ---------------------------------------------------- */
  --code-key:     oklch(44% 0.120 205);
  --code-str:     oklch(50% 0.150 45);
  --code-num:     oklch(48% 0.160 305);
  --code-null:    var(--fg-faint);
  --code-true:    var(--ok);
  --code-false:   var(--bad);

  /* ---- elevation: tinted, never neutral black ------------------------- */
  --shadow-1: 0 1px 2px oklch(24% 0.02 265 / 8%);
  --shadow-2: 0 2px 6px oklch(24% 0.02 265 / 8%), 0 8px 22px oklch(24% 0.02 265 / 8%);
  --shadow-3: 0 4px 10px oklch(24% 0.02 265 / 9%), 0 20px 48px oklch(24% 0.02 265 / 14%);
  --inner-lip: inset 0 1px 0 oklch(100% 0 0 / 60%);

  /* ---- radii: nothing in this product is a perfect rectangle ---------- */
  --r-xs: 6px;    /* dots, swatches, micro-tags */
  --r-sm: 8px;    /* compact controls */
  --r-md: 10px;   /* inputs, buttons, selects */
  --r-lg: 14px;   /* panels, popovers, rails */
  --r-xl: 18px;   /* large enclosures */
  --r-pill: 999px;

  /* ---- motion --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);      /* quart — default */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);      /* snappy entrances */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);      /* exits */
  --ease-both:   cubic-bezier(0.65, 0, 0.35, 1);     /* reversible toggles */
  --t-instant: 110ms;
  --t-fast:    170ms;
  --t-base:    240ms;
  --t-slow:    360ms;

  /* ---- type scale (fixed rem, ratio ~1.15) ---------------------------- */
  --fs-2xs: 0.6875rem;  /* 11px — micro labels, uppercase eyebrows */
  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.8125rem;  /* 13px — dense table body */
  --fs-md:  0.875rem;   /* 14px — default UI */
  --fs-lg:  0.9375rem;  /* 15px */
  --fs-xl:  1.125rem;   /* 18px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 2rem;       /* 32px — metric values only */

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace,
               Consolas, Menlo, monospace;

  /* ---- layout constants ----------------------------------------------- */
  --topbar-h: 60px;
  --shell-max: 1400px;         /* content max-width; the stream fills it edge to edge */
  --shell-pad: 24px;
  --drawer-w: 560px;           /* widened at >=1500px / >=1900px, see panels.css */
  --rail-h: 44px;              /* stream pagination rail height */

  --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:      oklch(16% 0.010 265);
  --bg-sunken:    oklch(13% 0.010 265);    /* derived: the original had no tier below the ground */
  --bg-surface:   oklch(19.5% 0.012 265);
  --bg-raised:    oklch(23% 0.014 265);
  --bg-chrome:    oklch(19.5% 0.012 265);
  --bg-glass:     oklch(22% 0.013 265 / 84%);
  --bg-scrim:     oklch(0% 0 0 / 45%);

  --fg-strong:    oklch(95% 0.005 265);
  --fg:           oklch(92% 0.006 265);
  --fg-muted:     oklch(70% 0.020 265);
  --fg-faint:     oklch(56% 0.018 265);

  --line:         oklch(30% 0.016 265);
  --line-strong:  oklch(32% 0.016 265);
  --line-glass:   oklch(100% 0 0 / 9%);

  /* Same ramp (defined once in :root), lighter steps for legibility on a dark
     ground: --red-400 stays saturated enough to read as red, not as pink. */
  --accent:       var(--red-400);
  --accent-hover: var(--red-300);
  --accent-fg:    oklch(18% 0.02 20);
  --accent-wash:  oklch(68% 0.135 20 / 15%);
  --accent-edge:  oklch(68% 0.135 20 / 40%);
  --ring:         var(--red-400);

  --ok:           oklch(76% 0.145 152);
  --warn:         oklch(81% 0.135 82);
  --bad:          oklch(70% 0.175 25);
  --info:         oklch(75% 0.115 245);

  --lv-debug:     oklch(70% 0.022 265);
  --lv-info:      oklch(75% 0.115 245);
  --lv-warning:   oklch(82% 0.135 82);
  --lv-error:     oklch(70% 0.175 25);
  --lv-critical:  oklch(66% 0.190 14);

  --st-running:   oklch(81% 0.135 82);
  --st-completed: oklch(76% 0.145 152);
  --st-failed:    oklch(70% 0.175 25);
  --st-cancelled: oklch(56% 0.018 265);

  --code-key:     oklch(80% 0.115 195);
  --code-str:     oklch(78% 0.130 55);
  --code-num:     oklch(80% 0.115 305);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 40%);
  --shadow-2: 0 2px 8px oklch(0% 0 0 / 40%), 0 12px 28px oklch(0% 0 0 / 34%);
  --shadow-3: 0 6px 14px oklch(0% 0 0 / 44%), 0 28px 60px oklch(0% 0 0 / 46%);
  --inner-lip: inset 0 1px 0 oklch(100% 0 0 / 7%);
}

/* Accessibility: honour the three OS-level preferences that affect this UI. */
@media (prefers-reduced-transparency: reduce) {
  /* Glass becomes a solid plane; the hierarchy it encoded is carried by the
     border and shadow that were already there. */
  :root { --bg-glass: var(--bg-surface); }
  .listbox-popover, .jump-head, .rail:hover {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --fg-muted: var(--fg); }
}