/* Design Tokens — Feeling Fascia
   Source of truth: design system (01-design-system.md)
   No hardcoded values in other CSS files — reference these tokens only. */

:root {
  /* Colors — Primary */
  --color-cream: #FAF7F2;
  --color-white: #FFFFFF;
  --color-charcoal: #2C2C2A;
  --color-gray: #5C5A52;

  /* Colors — Brand Accent */
  --color-blue: #3A5FA0;
  --color-blue-dark: #233565;
  --color-blue-light: #DBE2F4;
  --color-terra: #C4754B;
  --color-terra-light: #F5EAE0;
  --color-ocean: #4A7B8C;

  /* Colors — Functional */
  --color-border-light: #E5E2DC;
  --color-border-mid: #C8C4BC;
  --color-bg-alt: #F2EFE8;
  --color-overlay: rgba(44, 44, 42, 0.6);
  --color-gray-light: #B8B5AE;

  /* Typography */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Type Scale */
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  /* Spacing (8px grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --max-width: 1200px;
  /* T6-13: paragraph measure clamped to 60–75ch range */
  --max-width-text: 68ch;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-mid: 200ms ease;

  /* Section padding variants */
  --section-pad-sm: 48px;
  --section-pad-md: 64px;
  --section-pad-lg: 96px;
}

/* Mobile spacing compression */
@media (max-width: 639px) {
  :root {
    --space-2xl: 40px;
    --space-3xl: 56px;
  }
}