/* ==========================================================================
   LogPose — 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 the original LogPose grounds, kept unchanged.

   The single interaction accent is a desaturated teal (hue 195) — far enough
   from info-blue, warning-amber and error-red that a focus ring can never be
   mistaken for a severity signal.

   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 */

  /* ---- accent (interaction only) -------------------------------------- */
  --accent:       oklch(52% 0.098 195);
  --accent-hover: oklch(46% 0.100 195);
  --accent-fg:    oklch(99% 0.002 195);
  --accent-wash:  oklch(52% 0.098 195 / 11%);
  --accent-edge:  oklch(52% 0.098 195 / 34%);
  --ring:         oklch(52% 0.098 195);

  /* ---- 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%);

  --accent:       oklch(76% 0.105 195);
  --accent-hover: oklch(82% 0.105 195);
  --accent-fg:    oklch(18% 0.02 195);
  --accent-wash:  oklch(76% 0.105 195 / 15%);
  --accent-edge:  oklch(76% 0.105 195 / 40%);
  --ring:         oklch(76% 0.105 195);

  --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); }
}