/* ==========================================================================
   Design tokens
   Custom properties only. No component styles live here.
   ========================================================================== */

/* Self-hosted variable fonts, latin subset, woff2 only. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable-latin.woff2') format('woff2-variations'),
       url('/assets/fonts/fraunces-variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2-variations'),
       url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Font families -- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -- Type scale, ~1.3 ratio, base 16px -- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;

  /* -- Spacing scale, 4px base unit -- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* -- Radius scale -- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* -- Motion -- */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --ease-standard: ease;

  /* -- Layout -- */
  --content-max: 72rem;

  /* -- Raw color palette -- */
  /* Cool gray, hue 210 */
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F5F7;
  --neutral-150: #EAEDF0;
  --neutral-200: #DEE3E7;
  --neutral-300: #C5CCD3;
  --neutral-400: #98A3AE;
  --neutral-500: #6E7A87;
  --neutral-600: #515C67;
  --neutral-700: #3B444E;
  --neutral-800: #272D35;
  --neutral-900: #191D24;
  --neutral-950: #0E1116;

  /* Warm gold, hue ~45 */
  --accent-50: #FFFAEB;
  --accent-100: #FFF4D1;
  --accent-200: #FEE8A4;
  --accent-300: #FDD96D;
  --accent-400: #FBD041;
  --accent-500: #FAC71E;  /* brand base */
  --accent-600: #DC9D09;
  --accent-700: #99650A;  /* AA text-safe on light backgrounds */
  --accent-800: #71440A;
  --accent-900: #492909;

  /* -- Semantic tokens, light theme (default) -- */
  --color-bg: var(--neutral-50);
  --color-bg-raised: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-heading: var(--neutral-950);
  --color-accent: var(--accent-500);
  --color-accent-text: var(--accent-700);
  --color-accent-contrast: var(--neutral-950);
  --color-focus-ring: var(--accent-700);
}

[data-theme='dark'] {
  --color-bg: var(--neutral-950);
  --color-bg-raised: var(--neutral-900);
  --color-border: var(--neutral-800);
  --color-border-strong: var(--neutral-700);
  --color-text: var(--neutral-50);
  --color-text-muted: var(--neutral-400);
  --color-heading: var(--neutral-50);
  --color-accent: var(--accent-500);
  --color-accent-text: var(--accent-300);
  --color-accent-contrast: var(--neutral-950);
  --color-focus-ring: var(--accent-300);
}