/* ==========================================================================
   tokens.css — Variable SF Pro Typography & CDS Perceptual Design Tokens
   Derived from SFPro.woff2 + CDS v2 perceptual HSL / OKLab color architecture
   ========================================================================== */

/* Native cross-document View Transitions (inspired by antigravity.google) */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@font-face {
  font-family: "SF Pro";
  src:
    url("../fonts/SFPro.woff2") format("woff2-variations"),
    url("../fonts/SFPro.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root,
html[data-mode="dark"] {
  color-scheme: dark;

  /* CDS v2 Perceptual HSL Raw Channels */
  --bg-400-hsl: 60 3% 4.2%;
  --bg-300-hsl: 60 2.6% 6.4%;
  --bg-200-hsl: 30 3.3% 9.8%;
  --bg-100-hsl: 60 2.7% 13.4%;
  --bg-000-hsl: 60 2.1% 17.8%;

  --text-000-hsl: 48 33.3% 97.1%;
  --text-200-hsl: 50 9% 73.7%;
  --text-400-hsl: 48 4.8% 54.5%;

  --border-raw-hsl: 51 16.5% 84.5%;
  --accent-000-hsl: 210 72% 65%;
  --accent-100-hsl: 210 71% 52%;
  --accent-pro-hsl: 251 84.6% 74.5%;
  --brand-100-hsl: 15 63.1% 59.6%;
  --success-000-hsl: 142 62% 52%;

  /* Resolved Surfaces & Ink */
  --surface-void: hsl(var(--bg-400-hsl));
  --surface-0: hsl(var(--bg-300-hsl));
  --surface-1: hsl(var(--bg-200-hsl));
  --surface-2: hsl(var(--bg-100-hsl));
  --surface-3: hsl(var(--bg-000-hsl));

  --ink-primary: hsl(var(--text-000-hsl));
  --ink-secondary: hsl(var(--text-200-hsl));
  --ink-muted: hsl(var(--text-400-hsl));

  --line-subtle: hsl(var(--border-raw-hsl) / 0.085);
  --line-default: hsl(var(--border-raw-hsl) / 0.145);
  --line-strong: hsl(var(--border-raw-hsl) / 0.28);

  --signal-cobalt: hsl(var(--accent-000-hsl));
  --signal-cobalt-deep: hsl(var(--accent-100-hsl));
  --signal-orbit: hsl(var(--accent-pro-hsl));
  --signal-ember: hsl(var(--brand-100-hsl));
  --signal-ok: hsl(var(--success-000-hsl));

  --glass-backdrop: hsl(var(--bg-300-hsl) / 0.78);
  --spotlight-glow: hsl(var(--accent-000-hsl) / 0.11);
  --grid-dot: hsl(var(--border-raw-hsl) / 0.11);
  --surface-invert: #faf9f5;
  --ink-invert: #10100f;
}

html[data-mode="light"] {
  color-scheme: light;

  --bg-400-hsl: 45 20% 96.4%;
  --bg-300-hsl: 44 18% 94.8%;
  --bg-200-hsl: 42 15% 91.8%;
  --bg-100-hsl: 42 13% 88.2%;
  --bg-000-hsl: 40 12% 84.0%;

  --text-000-hsl: 30 8% 8.5%;
  --text-200-hsl: 30 5% 28.5%;
  --text-400-hsl: 30 4% 46.5%;

  --border-raw-hsl: 30 10% 14%;
  --accent-000-hsl: 222 72% 46%;
  --accent-100-hsl: 222 76% 38%;
  --accent-pro-hsl: 254 64% 50%;
  --brand-100-hsl: 15 66% 46%;
  --success-000-hsl: 145 68% 33%;

  --surface-void: hsl(var(--bg-400-hsl));
  --surface-0: hsl(var(--bg-300-hsl));
  --surface-1: hsl(var(--bg-200-hsl));
  --surface-2: hsl(var(--bg-100-hsl));
  --surface-3: hsl(var(--bg-000-hsl));

  --ink-primary: hsl(var(--text-000-hsl));
  --ink-secondary: hsl(var(--text-200-hsl));
  --ink-muted: hsl(var(--text-400-hsl));

  --line-subtle: hsl(var(--border-raw-hsl) / 0.08);
  --line-default: hsl(var(--border-raw-hsl) / 0.14);
  --line-strong: hsl(var(--border-raw-hsl) / 0.28);

  --signal-cobalt: hsl(var(--accent-000-hsl));
  --signal-cobalt-deep: hsl(var(--accent-100-hsl));
  --signal-orbit: hsl(var(--accent-pro-hsl));
  --signal-ember: hsl(var(--brand-100-hsl));
  --signal-ok: hsl(var(--success-000-hsl));

  --glass-backdrop: hsl(var(--bg-300-hsl) / 0.84);
  --spotlight-glow: hsl(var(--accent-000-hsl) / 0.08);
  --grid-dot: hsl(var(--border-raw-hsl) / 0.13);
  --surface-invert: #141413;
  --ink-invert: #faf9f5;
}

:root {
  /* Typography Stack */
  --font-sans: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* CDS Spring & Motion Physics (from shared-styles-Br2o_Ih_.css) */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* Layout Rhythm */
  --container-max: 1320px;
  --gutter: clamp(1.25rem, 3.5vw, 3rem);
  --nav-h: 58px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

/* CDS Status Dot Pulse Keyframes (from FLOP/styles/shared-styles-Br2o_Ih_.css) */
@keyframes dframe-dot-pulse {
  0%, 5% {
    opacity: 0.32;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  18%, 28% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  68%, 100% {
    opacity: 0.32;
  }
}

@keyframes beam-spin {
  to {
    --beam-angle: 360deg;
  }
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}