/* tokens.css — Design tokens. CSS custom properties only.
   Ported verbatim from qa/web-redesign/direction-A.html L52-121.
   Consumed by: layout.css (F2), components.css (F3), all views/components. */

:root {
  /* surface / fill — more-Toss: warmer canvas */
  --bg: #f4f4f8;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --elevated: #ffffff;
  --fill: #78788014;
  --fill-strong: #7878801f;

  /* accent — more-Toss: warmer/brighter fill, darkened ink for text-on-white.
     --accent (fill/buttons/pills) carries WHITE text → white-on-#1d6fe0 = 4.77:1 (AA).
     --accent-ink (accent-coloured TEXT on white surfaces) = #1668d9 → 5.23:1 on
     white, 4.77:1 on --bg (AA, both surfaces). Two-token split keeps the warmer
     fill from ever dropping text below 4.5:1. */
  --accent: #1d6fe0;
  --accent-ink: #1668d9;
  --accent-hover: #2a78ec;
  --accent-pressed: #155cc9;
  --accent-soft: #1d6fe014;
  --accent-soft-2: #1d6fe026;
  --on-accent: #ffffff;

  /* semantic */
  --success: #157f43;
  --success-soft: #157f4314;
  --warn: #8f5700;
  --warn-soft: #8f570014;
  --error: #c5303a;
  --error-soft: #c5303a14;
  --info: var(--accent-ink);

  /* text */
  --text: #191f28;
  --text-2: #4e5968;
  --text-3: #646e7b;
  --text-4: #b0b8c1;
  --on-accent-dim: #ffffffcc;

  /* separator / border */
  --separator: #3c3c4329;
  --separator-strong: #3c3c4347;
  --border: #d5d9df;
  --hairline: 0.5px;

  /* material / scrim */
  --material-bar: rgba(242, 242, 247, .72);
  --material-sheet: rgba(255, 255, 255, .80);
  --scrim: rgba(0, 0, 0, .40);
  --blur-bar: 20px;
  --blur-saturate: 180%;

  /* product-line hues */
  --pl-carol: #e5484d;
  --pl-pivot: #c77700;
  --pl-avia: #3182f6;
  --pl-shockwave: #1f9d55;

  /* typography */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
    'SF Pro Text', 'Inter', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic',
    system-ui, sans-serif;
  --font-mono: 'SF Mono', 'SFMono-Regular', 'JetBrains Mono', 'IBM Plex Mono',
    ui-monospace, 'Menlo', 'Consolas', monospace;

  /* type scale */
  --t-large-title: 700 34px/41px var(--font-sans);
  --t-title-1:     700 28px/34px var(--font-sans);
  --t-title-2:     700 22px/28px var(--font-sans);
  --t-title-3:     600 20px/25px var(--font-sans);
  --t-headline:    600 17px/22px var(--font-sans);
  --t-body:        400 17px/22px var(--font-sans);
  --t-callout:     400 16px/21px var(--font-sans);
  --t-subhead:     500 15px/20px var(--font-sans);
  --t-footnote:    400 13px/18px var(--font-sans);
  --t-caption-1:   600 13px/16px var(--font-sans);
  --t-caption-2:   600 11px/13px var(--font-sans);
  --num-hero:      800 68px/70px var(--font-mono);  /* more-Toss: bigger + bolder (was 600 56/60) */
  --num-card:      700 44px/46px var(--font-mono);  /* more-Toss: bolder hero rhythm */
  --num-inline:    600 28px/32px var(--font-mono);

  /* radius — more-Toss: one step softer */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   22px;   /* was 18 — cards */
  --r-xl:   28px;   /* was 24 — modal / sheet / KPI hero */
  --r-pill: 999px;

  /* spacing — 8pt grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-10: 64px;

  /* elevation */
  --shadow-1:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-2:       0 2px 6px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-3:       0 6px 16px rgba(16, 24, 40, .08), 0 16px 48px rgba(16, 24, 40, .14);
  --shadow-pressed: 0 1px 2px rgba(16, 24, 40, .10) inset;
  --ring-focus:     0 0 0 4px var(--accent-soft-2);

  /* motion */
  --dur-fast:      140ms;
  --dur-base:      240ms;
  --dur-slow:      360ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-decel:    cubic-bezier(0, 0, .2, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring-lg: cubic-bezier(.34, 1.8, .5, 1);  /* more-Toss: bouncier hero reveals */

  /* desktop shell metrics */
  --sidebar-w:   288px;
  --inspector-w: 380px;
  --topbar-h:    56px;
}

/* density dial (P4) — <html data-dense> tightens row rhythm + hero figure.
   Token-level so layout/components inherit without per-rule overrides. */
:root[data-dense] {
  --sp-3:  10px;
  --sp-4:  14px;
  --sp-5:  18px;
  --num-hero: 600 50px/54px var(--font-mono);
}

[data-theme="dark"] {
  /* surface / fill */
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #1c1c1e;
  --elevated: #2c2c2e;
  --fill: #7878801f;
  --fill-strong: #7878802e;

  /* accent — more-Toss: fill darkened so WHITE-on-fill holds AA in dark too
     (white-on-#2f6fe0 = 4.70:1). --accent-ink #69a9ff = bright text-on-dark
     (7.07:1 on --surface, 8.72:1 on --bg). */
  --accent: #2f6fe0;
  --accent-ink: #69a9ff;
  --accent-hover: #4d8bf5;
  --accent-pressed: #2a64cf;
  --accent-soft: #4593fc24;
  --accent-soft-2: #4593fc38;
  --on-accent: #ffffff;

  /* semantic */
  --success: #30d158;
  --success-soft: #30d15824;
  --warn: #ffd60a;
  --warn-soft: #ffd60a24;
  --error: #ff453a;
  --error-soft: #ff453a24;
  --info: var(--accent-ink);

  /* text */
  --text: #f2f2f7;
  --text-2: #aeb4be;
  --text-3: #8b95a1;
  --text-4: #5b6470;
  --on-accent-dim: #ffffffcc;

  /* separator / border */
  --separator: #54545899;
  --separator-strong: #545458cc;
  --border: #38383a;

  /* material / scrim */
  --material-bar: rgba(28, 28, 30, .72);
  --material-sheet: rgba(28, 28, 30, .84);
  --scrim: rgba(0, 0, 0, .56);

  /* product-line hues */
  --pl-carol: #ff453a;
  --pl-pivot: #ffd60a;
  --pl-avia: #4593fc;
  --pl-shockwave: #30d158;

  /* elevation */
  --shadow-1:       0 1px 2px rgba(0, 0, 0, .40), 0 0 0 .5px rgba(255, 255, 255, .04);
  --shadow-2:       0 4px 12px rgba(0, 0, 0, .50), 0 0 0 .5px rgba(255, 255, 255, .05);
  --shadow-3:       0 12px 40px rgba(0, 0, 0, .60), 0 0 0 .5px rgba(255, 255, 255, .06);
  --shadow-pressed: 0 1px 2px rgba(0, 0, 0, .50) inset;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE LAYER + A11Y  (audit B1/B2/B4 — restores direction-A global base that
   was dropped in the split-CSS port; additive, no token redefinition)
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--t-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1;   /* disambiguated 1/l/I in Pretendard */
}
::selection { background: var(--accent-soft-2); color: var(--text); }

/* B2 — global keyboard focus ring. --accent ≥3:1 on every surface (non-text UI
   contrast) and ≥4.5:1 as text. Components that ship their own box-shadow ring
   (.pill / .switch / .field-select / .search input) opt out via outline:none. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* visually-hidden, screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* B4 — thin scrollbar recipe for the three .scroll hosts (sidebar / content /
   drawer body) — class was already in the markup but unstyled. */
.scroll { scrollbar-width: thin; scrollbar-color: var(--separator-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--separator); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--separator-strong); }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* B9 — CSS-only skeleton shimmer (records.js loadTrials hook is a follow-up;
   the class is dial-neutral and reduce-motion-guarded below). */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--fill), var(--fill-strong), var(--fill));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}

/* B1 — reduced-motion guard (REQUIRED, WCAG 2.3.3). Neutralises viewIn, drawer/
   modal/toast springs, switch knob, skeleton shimmer, count-ups, hover transforms.
   MUST stay LAST so it overrides every animation/transition declared above. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}