/* ============================================
   CSS TOKENS - Premium Textbook Reader
   Based on DESIGN_SPEC.md
   ============================================ */

:root {
  /* ============================================
     FONT STACKS
     ============================================ */
  --font-heading: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --font-body: "EB Garamond", "Garamond", "Georgia", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ============================================
     TYPE SCALE (rem)
     ============================================ */
  --type-h1: 2.75rem;
  --type-h2: 2rem;
  --type-h3: 1.5rem;
  --type-h4: 1.25rem;
  --type-h5: 1rem;
  --type-body: 1.125rem;
  --type-small-ui: 0.875rem;
  --type-button: 0.9375rem;
  --type-footnote: 0.8125rem;
  --type-blockquote: 1.125rem;

  /* ============================================
     LINE HEIGHTS
     ============================================ */
  --line-h1: 1.2;
  --line-h2: 1.3;
  --line-h3: 1.4;
  --line-h4: 1.4;
  --line-h5: 1.5;
  --line-body: 1.75;
  --line-small-ui: 1.5;
  --line-button: 1.4;
  --line-footnote: 1.6;
  --line-blockquote: 1.75;

  /* ============================================
     SPACING SCALE (rem)
     ============================================ */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.5rem;   /* 40px */
  --space-3xl: 3rem;     /* 48px */
  --space-4xl: 4rem;     /* 64px */
  --space-5xl: 5rem;     /* 80px */
  --space-6xl: 6rem;     /* 96px */
  --space-8xl: 8rem;     /* 128px */

  /* ============================================
     RADII (px)
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     BLUR (px)
     ============================================ */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 20px;
  --blur-xl: 24px;

  /* ============================================
     OVERLAY GRADIENT COLORS
     ============================================ */
  --overlay-start: rgba(26, 26, 38, 0.75);
  --overlay-end: rgba(15, 15, 25, 0.85);
  --overlay-vignette: rgba(0, 0, 0, 0.3);
  --overlay-vignette-radius: 80%;

  /* ============================================
     GLASS SURFACE COLORS
     ============================================ */
  --glass-bg: rgba(31, 41, 55, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 20px;
  --glass-shadow-primary: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-shadow-close: 0 2px 8px rgba(0, 0, 0, 0.2);
  --glass-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: rgba(230, 230, 230, 0.95);
  --text-secondary: rgba(230, 230, 230, 0.85);
  --text-muted: rgba(182, 190, 202, 0.7);
  --text-link: rgba(143, 227, 255, 0.9);
  --text-link-visited: rgba(143, 227, 255, 0.65);
  --text-link-hover: rgba(215, 183, 255, 0.95);
  --text-selection: rgba(159, 184, 255, 0.3);

  /* ============================================
     ACCENT + FOCUS RING
     ============================================ */
  --accent-primary: rgba(159, 184, 255, 0.7);
  --accent-hover: rgba(215, 183, 255, 0.95);
  --focus-ring-color: rgba(159, 184, 255, 0.8);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);

  /* ============================================
     MOTION DURATIONS (ms)
     ============================================ */
  --motion-fast: 200ms;
  --motion-normal: 320ms;
  --motion-slow: 600ms;
  --motion-settle: 800ms;

  /* ============================================
     EASING CURVES
     ============================================ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ============================================
     LAYOUT VALUES
     ============================================ */
  --page-max-width: 72rem;
  --page-min-width: 45rem;
  --page-padding-x: 4rem;
  --page-padding-y: 5rem;
  --page-top-margin: 6rem;
  --page-bottom-margin: 8rem;
  --top-bar-height: 3.5rem;
  --bottom-nav-height: 4rem;
  --toc-width: 22rem;

  /* ============================================
     READING SURFACE
     ============================================ */
  --reading-surface-bg: rgba(26, 26, 26, 0.85);
  --reading-surface-blur: 20px;
  --reading-surface-border: rgba(255, 255, 255, 0.12);
  --reading-surface-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --reading-surface-radius: 16px;
  --reading-surface-padding-desktop: 4rem 3rem;
  --reading-surface-padding-tablet: 3rem 2rem;
  --reading-surface-padding-mobile: 2rem 1.5rem;
  --reading-surface-max-width: 120ch;
  --reading-surface-min-width: 20rem;

  /* ============================================
     CITATION HEADER (inside reading surface)
     ============================================ */
  --citation-header-bg: rgba(255, 255, 255, 0.06);
  --citation-header-border: rgba(255, 255, 255, 0.15);
  --citation-header-padding: var(--space-lg) var(--space-2xl);
}

/* ============================================
   FOCUS MODE OVERRIDES
   ============================================ */
body.focus-mode {
  --overlay-start: rgba(20, 20, 30, 0.88);
  --overlay-end: rgba(10, 10, 18, 0.92);
  --glass-bg: rgba(31, 41, 55, 0.78);
  --glass-blur: 24px;
  --glass-border: rgba(255, 255, 255, 0.15);
  --page-max-width: 65rem;
  --type-body: 1.1875rem;
  --line-body: 1.8;
  --bar-opacity: 0.3;
  --reading-surface-bg: rgba(26, 26, 26, 0.92);
  --reading-surface-blur: 24px;
  --reading-surface-max-width: 120ch;
}

body.focus-mode .background-overlay {
  filter: blur(8px) saturate(85%) brightness(90%);
}

body.focus-mode .top-bar,
body.focus-mode .bottom-nav {
  opacity: 0.3;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

body.focus-mode .top-bar:hover,
body.focus-mode .bottom-nav:hover {
  opacity: 0.85;
}