/* ============================================================
   design-tokens.css  —  CSS Custom Properties & Design Tokens
   Paediatric Medical Education Notes
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
  DESIGN TOKENS
  ============================================================ */
:root {
  /* ── Font families (DESIGN.md: Inter + JetBrains Mono) ── */
  --font-display: "Inter", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --paper: #ffffff;
  --background: #fbfbfd; /* Apple's actual page background */

  /* ── Primary (interactive / brand) ── */
  --primary: #000000; /* Link Cobalt - Apple's blue */
  --blue: #0071e3; /* For buttons */

  /* ── Neutrals (Apple's gray scale) ── */
  --border: #d6d4ce;
  --border-light: #e8e8ed;
  --muted: #6e6e64;

  /* Apple-style neutral surfaces: white cards on gray page */
  --surface: var(--paper);
  --master: var(--paper); /* All card surfaces → pure white */
  --surface-subtle: color-mix(
    in srgb,
    var(--background) 30%,
    var(--paper)
  ); /* ≈ #f9f9fa */

  /* ── Text hierarchy — Black/Gray series (Apple.com 2024) ── */
  --text-primary: #1d1d1f; /* Headlines, important UI */
  --text-secondary: #6e6e73; /* Body text, subtitles — readable */
  --text-tertiary: #86868b; /* Metadata, timestamps */
  --text-quaternary: #a1a1a6; /* Placeholders, disabled */
  --text-dark: #1d1d1f;

  /* ── Stronger emphasis variants ── */
  --text-primary-strong: #000000;
  --text-secondary-strong: #4a4a50;

  /* ── Dark background text ── */
  --text-on-dark: #ffffff;
  --text-on-dark-soft: rgba(255, 255, 255, 0.85);
  --text-on-dark-muted: rgba(255, 255, 255, 0.65);

  /* ── Deep academic accents (use sparingly) ── */
  --accent-navy: #1e3a5f; /* deep blue — citations, definitions */
  --accent-forest: #2c4c3b; /* dark green — data, results, proofs */
  --accent-terracotta: #9b4b3c; /* dark orange/rust — warnings, open problems */
  --accent-crimson: #8b3a3a; /* dark red — corrections, errata, critical notes */

  /* ── Typography scale (fluid: mobile → desktop) ──
     8 readable sizes + 2 decorative-only watermark sizes.
     Hierarchy: xs < sm < base < md < lg < xl < 2xl < display
  ── */
  --fs-xs: clamp(0.75rem, 1.1vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 1.3vw, 1rem);
  --fs-base: clamp(1rem, 1.5vw, 1.125rem);
  --fs-md: clamp(1.15rem, 1.9vw, 1.3rem);
  --fs-lg: clamp(1.3rem, 2.2vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 2.8vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 3.6vw, 2.25rem);
  --fs-display: clamp(2.75rem, 5.5vw, 3.5rem);
  /* ── Decorative watermarks only (never use for readable text) ── */
  --fs-watermark: clamp(6rem, 12vw, 9rem);
  --fs-watermark-lg: clamp(8rem, 16vw, 12rem);

  /* ── Letter spacing ── */
  --ls-tightest: -0.04em;
  --ls-tighter: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0em;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;
  --ls-huge: 0.2em;
  --ls-huger: 0.3em;
  --ls-massive: 0.46em;

  /* ── Shadows (Apple-inspired: soft, diffused) ── */
  --bs-thin: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --bs-medium: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --bs-heavy: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  --bs-veryheavy:
    0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ── Spacing scale (8pt system) ── */
  --space-1: 0.5rem; /* 8px  */
  --space-2: 1rem; /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem; /* 32px */
  --space-5: 2.5rem; /* 40px */
  --space-6: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-10: 5rem; /* 80px */
  --space-12: 6rem; /* 96px */

  /* ── Border radius scale (Apple: small for UI, larger for content cards) ── */
  --radius-xs: 4px; /* inline tags, small chips */
  --radius-sm: 6px; /* form elements, small buttons */
  --radius-md: 10px; /* cards, panels */
  --radius-lg: 14px; /* large cards */
  --radius-xl: 18px; /* hero cards, modals */
  --radius-pill: 9999px; /* pill badges, primary buttons */
}