/* ---------- Brand web fonts (self-hosted, Latin subset) ----------
   Jost  — sans for UI text (OFL)            fonts/jost-var.woff2
   Devina Garden — script accent word (EULA)  fonts/devina-garden.woff2
   Gelasio — metric match for Georgia (OFL), only downloads on devices
             without Georgia, so the serif looks the same everywhere. */
@font-face { font-family: "Jost"; src: url("fonts/jost-var.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Devina Garden"; src: url("fonts/devina-garden.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("fonts/gelasio-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("fonts/gelasio-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ============================================================
   LABO — tokens.css
   Visual System v1.0
   Authority: design/01_visual_system.md
   ============================================================ */

:root {
  /* ---------- Color: light (default) ---------- */
  --color-surface:         #F4F4F2;
  --color-surface-raised:  #FBFBFA;
  --color-surface-sunken:  #ECECE9;
  --color-surface-stage:   #EAEDEE;
  --color-ink:             #0E0E10;
  --color-ink-muted:       #54565A;
  --color-ink-subtle:      #8A8C90;
  --color-ink-disabled:    #B8BABE;
  --color-line:            #D9DAD8;
  --color-line-strong:     #1A1A1C;

  /* ---------- Signal palette (state + live) ---------- */
  --signal-cyan:           #00C8D2;
  --signal-cyan-hi:        #3FE1EA;
  --signal-amber:          #E8A33D;
  --signal-red:            #D8473C;
  --signal-green:          #3FA66A;
  --signal-violet:         #7A6CFF;

  /* ---------- Data-viz categorical ---------- */
  --data-1: #1A1A1C;
  --data-2: #7A6CFF;
  --data-3: #E8A33D;
  --data-4: #3FA66A;
  --data-5: #D8473C;
  --data-6: #5C8FB8;
  --data-7: #A36AB8;
  --data-8: #6E7074;

  /* ---------- Type families ---------- */
  --font-display: Georgia, "Gelasio", serif;
  --font-sans:    "Jost", system-ui, -apple-system, sans-serif;
  --font-script:  "Devina Garden", cursive;
  --font-ui:      "Söhne", "Inter Display", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --ts-display-size:   5rem;     --ts-display-lh:   1.02;  --ts-display-tr:   -0.022em;
  --ts-h1-size:        3.25rem;  --ts-h1-lh:        1.06;  --ts-h1-tr:        -0.018em;
  --ts-h2-size:        2rem;     --ts-h2-lh:        1.15;  --ts-h2-tr:        -0.012em;
  --ts-h3-size:        1.375rem; --ts-h3-lh:        1.25;  --ts-h3-tr:        -0.006em;
  --ts-body-lg-size:   1.125rem; --ts-body-lg-lh:   1.55;  --ts-body-lg-tr:   0;
  --ts-body-size:      1rem;     --ts-body-lh:      1.55;  --ts-body-tr:      0;
  --ts-caption-size:   0.8125rem;--ts-caption-lh:   1.40;  --ts-caption-tr:   0.020em;
  --ts-mono-size:      0.875rem; --ts-mono-lh:      1.50;  --ts-mono-tr:      0;

  /* ---------- Spacing (8pt) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- Radius ---------- */
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;
  --radius-4:    14px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --gutter:        clamp(16px, 2vw, 32px);
  --margin:        clamp(24px, 5vw, 96px);

  /* ---------- Elevation ---------- */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(14,14,16,.06), 0 2px 8px rgba(14,14,16,.04);
  --elev-2: 0 8px 24px rgba(14,14,16,.08), 0 2px 6px rgba(14,14,16,.06);

  /* ---------- Motion: duration ---------- */
  --dur-1:    80ms;
  --dur-2:    160ms;
  --dur-3:    240ms;
  --dur-4:    480ms;
  --dur-5:    720ms;
  --dur-6:    900ms;
  --dur-data: 1200ms;

  /* ---------- Motion: easing ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.83, 0, 0.17, 1);
  --ease-linear: linear;
  --ease-data:   cubic-bezier(0.33, 0, 0.15, 1);
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface:        #0E0E10;
    --color-surface-raised: #16161A;
    --color-surface-sunken: #08080A;
    --color-surface-stage:  #1B1E1F;
    --color-ink:            #F4F4F2;
    --color-ink-muted:      #A6A8AC;
    --color-ink-subtle:     #6E7074;
    --color-ink-disabled:   #3A3C40;
    --color-line:           #26272B;
    --color-line-strong:    #F4F4F2;

    --elev-1: 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.5);
    --elev-2: 0 8px 24px rgba(0,0,0,.6),     0 2px 6px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --color-surface:        #0E0E10;
  --color-surface-raised: #16161A;
  --color-surface-sunken: #08080A;
  --color-surface-stage:  #1B1E1F;
  --color-ink:            #F4F4F2;
  --color-ink-muted:      #A6A8AC;
  --color-ink-subtle:     #6E7074;
  --color-ink-disabled:   #3A3C40;
  --color-line:           #26272B;
  --color-line-strong:    #F4F4F2;
  --elev-1: 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.5);
  --elev-2: 0 8px 24px rgba(0,0,0,.6),     0 2px 6px rgba(0,0,0,.4);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-3: 80ms;
    --dur-4: 80ms;
    --dur-5: 80ms;
    --dur-6: 80ms;
    --dur-data: 0ms;
  }
}

/* ---------- Base resets ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-surface);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; line-height: var(--ts-body-lh); font-size: var(--ts-body-size); }

h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--ts-h1-size); line-height: var(--ts-h1-lh); letter-spacing: var(--ts-h1-tr); margin: 0; }
h2 { font-family: var(--font-ui); font-weight: 500; font-size: var(--ts-h2-size); line-height: var(--ts-h2-lh); letter-spacing: var(--ts-h2-tr); margin: 0; }
h3 { font-family: var(--font-ui); font-weight: 500; font-size: var(--ts-h3-size); line-height: var(--ts-h3-lh); letter-spacing: var(--ts-h3-tr); margin: 0; }

a { color: inherit; text-decoration: none; }

.t-display { font-family: var(--font-display); font-weight: 400; font-size: var(--ts-display-size); line-height: var(--ts-display-lh); letter-spacing: var(--ts-display-tr); }
.t-caption { font-family: var(--font-ui); font-weight: 500; font-size: var(--ts-caption-size); line-height: var(--ts-caption-lh); letter-spacing: var(--ts-caption-tr); color: var(--color-ink-muted); }
.t-caption-up { text-transform: uppercase; letter-spacing: 0.04em; }
.t-mono { font-family: var(--font-mono); font-size: var(--ts-mono-size); line-height: var(--ts-mono-lh); font-variant-numeric: tabular-nums; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.unit::before { content: "\200A"; }

/* ---------- Material classes ---------- */
.material-matte {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-3);
}
.material-matte--inset { background: var(--color-surface-sunken); border-color: transparent; }
.material-matte--elevated { box-shadow: var(--elev-1); }

.material-glass {
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  box-shadow: var(--elev-2);
  border-radius: var(--radius-3);
}

.material-metal {
  background:
    conic-gradient(from 210deg at 50% 35%,
      #C9CDD0 0deg, #FAFBFB 60deg, #B5BABE 130deg,
      #E4E7E9 220deg, #9CA1A5 300deg, #C9CDD0 360deg),
    linear-gradient(90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(0,0,0,0.04) 50%,
      rgba(255,255,255,0.04) 100%);
  background-blend-mode: overlay;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 0 rgba(0,0,0,0.06);
  border-radius: var(--radius-4);
}

/* ---------- Live-data binding (the only sanctioned cyan) ---------- */
.is-live { color: var(--signal-cyan); }
.is-live::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--signal-cyan);
  margin-right: 8px;
  vertical-align: 1px;
  animation: live-pulse 1.6s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}