/* Structural — Design System
 * Inspired by Linear, Perplexity, Anthropic
 * All tokens defined here. Never use hardcoded values in component CSS.
 */

:root {
  /* === Colors === */
  --bg-primary: #FAFAF9;
  --bg-secondary: #F4F4F5;
  --bg-tertiary: #FFFFFF;
  --bg-overlay: rgba(24, 24, 27, 0.6);

  --border-subtle: #E4E4E7;
  --border-strong: #D4D4D8;
  --border-focus: #2563EB;

  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #A1A1AA;
  --text-quaternary: #D4D4D8;
  --text-inverse: #FAFAF9;

  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-subtle: rgba(37, 99, 235, 0.08);
  --accent-focus-ring: rgba(37, 99, 235, 0.12);

  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;

  /* Score gradient helpers */
  --score-high: #059669;
  --score-mid: #52525B;
  --score-low: #A1A1AA;

  /* === Typography === */
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'Times New Roman', serif;
  --font-sans: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Font sizes (8px base scale) */
  --fs-72: 72px;
  --fs-56: 56px;
  --fs-48: 48px;
  --fs-32: 32px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-tighter: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.02em;

  /* === Spacing (8px grid) === */
  --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;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* === Shadows (use sparingly) === */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-sm: 0 2px 8px rgba(24, 24, 27, 0.04), 0 1px 2px rgba(24, 24, 27, 0.03);
  --shadow-md: 0 4px 16px rgba(24, 24, 27, 0.06), 0 2px 4px rgba(24, 24, 27, 0.04);
  --shadow-lg: 0 12px 32px rgba(24, 24, 27, 0.08), 0 4px 8px rgba(24, 24, 27, 0.04);
  --shadow-focus: 0 0 0 4px var(--accent-focus-ring);

  /* === Motion === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);

  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* === Layout === */
  --max-content: 720px;
  --max-wide: 1080px;
  --header-height: 64px;

  /* === z-index === */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* === Base typography === */
html {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body {
  font-family: var(--font-sans);
}

/* Numerals use mono font */
.numeral, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

.serif {
  font-family: var(--font-serif);
}

/* === Utility classes === */
.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;
}

/* === Focus styles === */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* === Selection === */
::selection {
  background: var(--accent);
  color: var(--text-inverse);
}

/* === Dark mode reserved (not implemented now) === */
@media (prefers-color-scheme: dark) {
  /* Dark mode tokens will be defined here in Phase 3 */
}