/*
  Design tokens — single source of truth for color, spacing, type, and other
  primitives. Nothing here renders anything by itself; typography.css,
  grid.css, layout.css, and components/*.css consume these.

  Breakpoints can't live as custom properties inside @media conditions, so
  they're documented here as a fixed reference. Reuse these exact values
  everywhere rather than introducing new ones:

    480px   small phones
    768px   tablet
    1024px  small desktop
    1280px  desktop
    1600px  large desktop
*/

:root {
  /* ---- Color — PLACEHOLDER palette, replace with real brand colors ---- */
  --color-ink: #1b1a17;          /* primary text / near-black */
  --color-ink-soft: #4a4842;     /* secondary text */
  --color-paper: #faf8f4;        /* page background / off-white */
  --color-paper-alt: #f1ede5;    /* section background, slightly deeper */
  --color-stone: #d8d2c4;        /* borders, hairlines, dividers */
  --color-sand: #b9ab8f;         /* warm neutral accent */
  --color-sage: #8a9384;         /* muted accent, secondary CTA/tags */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Semantic aliases — prefer these in component/layout CSS over raw colors */
  --color-bg: var(--color-paper);
  --color-bg-alt: var(--color-paper-alt);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-border: var(--color-stone);
  --color-accent: var(--color-sand);

  /* ---- Spacing scale (base unit 4px) ---- */
  --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: 7.5rem;   /* 120px */
  --space-40: 10rem;    /* 160px */

  /* ---- Typography — font families ---- */
  --font-heading: "PPEiko", Georgia, "Times New Roman", serif;
  --font-body: "AvenirNext", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — mobile sizes; typography.css layers desktop overrides */
  --font-size-1: 11px;   /* caption/label */
  --font-size-2: 12px;
  --font-size-3: 13px;
  --font-size-4: 14px;   /* small body */
  --font-size-5: 16px;   /* body */
  --font-size-6: 18px;
  --font-size-7: 24px;
  --font-size-8: 32px;
  --font-size-9: 40px;
  --font-size-10: 48px;
  --font-size-11: 64px;
  --font-size-12: 80px;  /* hero, desktop only */

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* ---- Heading typography tokens ---- */
  /* Base = mobile; -md = 768px tablet override; -lg = 1280px desktop override
     (only where typography.css actually steps up at that breakpoint). */
  --font-size-h1: 34px;
  --font-size-h1-md: 44px;
  --font-size-h1-lg: 52px;
  --font-size-h2: 26px;
  --font-size-h2-md: 32px;
  --font-size-h2-lg: 38px;
  --font-size-h3: 22px;
  --font-size-h3-md: 26px;
  --font-size-h4: 18px;
  --font-size-h4-md: 20px;
  --font-size-h5: 16px;
  --font-size-h6: 13px;

  --line-height-h1: var(--line-height-tight);
  --line-height-h2: var(--line-height-tight);
  --line-height-h3: var(--line-height-normal);
  --line-height-h4: var(--line-height-normal);
  --line-height-h5: var(--line-height-normal);
  --line-height-h6: var(--line-height-normal);

  /* ---- Body typography tokens ---- */
  --font-size-body-large: 18px;    /* 24px @ 768px+ */
  --font-size-body-regular: 16px;
  --font-size-body-small: 14px;

  --line-height-body-large: var(--line-height-relaxed);
  --line-height-body-regular: var(--line-height-relaxed);
  --line-height-body-small: var(--line-height-normal);

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --font-weight-ultralight: 200; /* AvenirNext UltraLight */
  --font-weight-light: 300;      /* PPEiko Light Italic (requires font-style: italic) */
  --font-weight-normal: 400;     /* AvenirNext Regular · PPEiko Regular */
  --font-weight-medium: 500;     /* AvenirNext Medium */
  --font-weight-demibold: 600;   /* AvenirNext DemiBold — h4/h5/h6, UI elements */
  --font-weight-bold: 700;       /* AvenirNext Bold */
  --font-weight-heavy: 800;      /* AvenirNext Heavy — sparingly */

  /* ---- Grid / container ---- */
  --container-max-site: 119.0625rem; /* 1905px — global site maximum */
  --container-max-wide: 112rem; /* 1792px — full-bleed editorial sections */

  --gutter-sm: 1.25rem;  /* 20px, mobile */
  --gutter-md: 2rem;     /* 32px, tablet */
  --gutter-lg: 4rem;     /* 64px, desktop */

  --grid-columns: 12;
  --grid-gap: var(--space-6);

  /* ---- Radii / shadows / motion ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(27, 26, 23, 0.08);
  --shadow-lg: 0 12px 40px rgba(27, 26, 23, 0.12);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---- Header ---- */
  --header-height: var(--space-24); /* 96px */
}