/* ==========================================================================
   AERIN — SHARED DESIGN FOUNDATION
   --------------------------------------------------------------------------
   The single source of truth for everything that must look the same across
   aerinwang.com and the standalone guides in /public.

   Loaded by:
     · app/globals.css   (the Next.js site)
     · public/guide.html          (How to make your own brand with AI)
     · public/muse-pilates.html   (Muse Pilates case study)

   ── The two tiers ────────────────────────────────────────────────────────
   TIER 1 — locked (this file). Fonts, type scale, spacing, radii, motion and
   the neutral palette. These carry the "this is Aerin's site" signal, so a
   page must not redefine them.

   TIER 2 — per-page accent. A guide may override --accent / --accent-deep /
   --accent-soft only. That lets a case study wear its subject's colour (the
   Muse guide runs oxblood) without the page drifting away from the system.

   Add a token here rather than in a page, or the three stylesheets start
   disagreeing again.
   ========================================================================== */

:root {
  /* — Type: one pairing everywhere — */
  --font-display: "Recoleta", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --wt-display: 500;      /* hero may go 600 */
  --ls-display: -0.015em; /* gentle negative tracking on large serif */
  --lh-display: 1.06;

  /* — Type scale: fluid, so headings step the same way at every width.
       This is the H1/H2/H3 hierarchy. Never hard-code a heading size. — */
  --fs-display: clamp(40px, 8.4vw, 118px);  /* hero statements */
  --fs-h1:      clamp(36px, 4.6vw, 64px);   /* page title */
  --fs-h2:      clamp(29px, 3.3vw, 46px);   /* section heading */
  --fs-h3:      clamp(21px, 1.9vw, 27px);   /* sub-section */
  --fs-lead:    clamp(17px, 1.4vw, 20px);   /* intro paragraph */
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-label:   12px;                        /* eyebrows, meta */

  /* — Neutral palette (Tier 1) — */
  --milk:  #FBFAF1;   /* page background: warm ivory */
  --card:  #FEFDF8;   /* lifted panel: the brightest layer */
  --beige: #F0EDE5;   /* recessed sections, insets */
  --ink:   #202A38;   /* primary text: deep desaturated navy, never black */
  --slate: #5C6C80;   /* secondary text */
  --muted: var(--slate);
  --border:        rgba(32, 42, 56, 0.12);
  --border-strong: rgba(32, 42, 56, 0.22);

  /* — Accent (Tier 2 default = the brand blue). A guide may override these
       three, and nothing else. — */
  --accent:      #4A6FA5;
  --accent-deep: #395A8C;
  --accent-soft: #E3EEFB;
  --accent-ink:  var(--milk);  /* text sitting ON an accent fill */

  /* — Spacing scale — every gap should be a step on this ladder, never an
       arbitrary number. Keeps vertical rhythm even across pages. — */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* — Measure: how long a line of text is allowed to get. Past ~75 characters
       the eye loses the start of the next line. — */
  --measure:       68ch;  /* body copy */
  --measure-tight: 46ch;  /* leads, notes, captions */

  /* — Layout — */
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1120px;
  --maxw-wide: 1280px;
  --maxw-read: 1060px;  /* guide / long-form column */
  --nav-h:     76px;

  /* — Radii: the less-rounded button shape is --r-sm — */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* — Motion — */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}