/* B3DP design tokens — FROZEN 28 Sep 2026 22:30, direction D ("Apple × live": golden ratio, live palette).
   Supersedes direction C (23 Sep). Authorised by the human in session on 28 Sep; the redesign brief is R7 in PROGRESS.md.
   Runs must not edit this file. Every colour, size, space and radius in site.css is a var() from here.

   Golden ratio: φ = 1.618. Type sizes are powers of φ from a 16 px base (each step is √φ = 1.272).
   Rhythm (section padding, gutters, radii, shadows) uses Fibonacci pixels: 5 8 13 21 34 55 89 144.
   Contrast (WCAG AA 4.5:1): --color-accent #ff9900 fails with white text (2.14:1) and passes with
   --color-on-accent (7.86:1), so orange elements always carry dark text. Blue stays #0069d9 (5.22:1 on
   white, 4.74:1 on the grey band); Apple's #0071e3 fails on the grey band (4.31:1). */
:root {
  /* ---- colour ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f7;           /* light grey band; alternates with white */
  --color-text: #1d1d1f;             /* near-black, not pure black */
  --color-text-muted: #424245;
  --color-text-faint: #6e6e73;       /* 5.07:1 on white, 4.66:1 on --color-bg-alt */
  --color-border: rgba(0,0,0,0.1);
  --color-primary: #0069d9;          /* BLUE — links, primary buttons, the ONE blue band per page */
  --color-primary-hover: #005cb8;
  --color-accent: #ff9900;           /* ORANGE — Upload-file button, headline zigzag, list bullets */
  --color-accent-hover: #e68a00;
  --color-on-accent: #1d1d1f;        /* text on orange is always dark (white fails AA) */
  --color-dark: #000000;             /* the ONE black band per page */
  --color-on-dark: #f5f5f7;
  --color-on-dark-muted: #a1a1a6;
  --color-focus: #0069d9;

  /* photo callouts */
  --overlay-photo: rgba(0,0,0,0.28);
  --overlay-photo-strong: rgba(0,0,0,0.4);
  --glass-bg: rgba(29,29,31,0.55);
  --glass-border: rgba(255,255,255,0.16);
  --glass-blur: 20px;
  --header-bg: rgba(255,255,255,0.8);

  /* elevation */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lift: 0 21px 34px rgba(0,0,0,0.12);

  /* ---- type (Montserrat 400 + 700 only, as live) ---- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --text-xs: 0.8125rem;   /* 13 — legal footnotes only */
  --text-sm: 0.875rem;    /* 14 — uppercase micro-labels only, never body */
  --text-base: 1rem;      /* 16 — nav, buttons, captions, tile body */
  --text-md: 1.125rem;    /* 18 — body copy */
  --text-lg: 1.272rem;    /* 20.4 = 16·φ^0.5 — lede, tile headings */
  --text-h5: 1.618rem;    /* 25.9 = 16·φ — h3 */
  --text-h4: 2.058rem;    /* 32.9 = 16·φ^1.5 — h4, card titles */
  --text-h3: 2.618rem;    /* 41.9 = 16·φ^2 — h2 */
  --text-h2: 3.33rem;     /* 53.3 = 16·φ^2.5 — sub-page h1, big numerals */
  --text-h1: 4.236rem;    /* 67.8 = 16·φ^3 — homepage hero h1 */
  --text-h1-mobile: 2.618rem; /* 41.9 */
  --leading-heading: 1.08;
  --leading-body: 1.47;
  --leading-loose: 1.618;
  --tracking-caps: 0.08em;
  --tracking-tight: -0.022em;   /* display headlines */

  /* ---- space (4px base for component internals) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  /* rhythm (Fibonacci) */
  --section-pad: 5.5625rem;       /* 89px top/bottom on every band */
  --section-pad-mobile: 3.4375rem; /* 55px */
  --gutter: 1.3125rem;            /* 21px inside the container */
  --gutter-page: 3.4375rem;       /* 55px header/footer side padding, desktop */
  --gutter-mobile: 1.3125rem;     /* 21px */

  /* ---- shape ---- */
  --radius-button: 999px;         /* pill */
  --radius-panel: 1.3125rem;      /* 21px cards, tiles, glass */
  --radius-image: 1.3125rem;      /* 21px standalone photos */
  --radius-avatar: 999px;
  --border: 1px;

  /* ---- layout ---- */
  --container: 80rem;             /* 1280px */
  --container-narrow: 61.8rem;    /* 989px — centred text blocks (φ of 1600) */
  --measure: 65ch;
  --ratio-golden: 1.618 / 1;      /* image aspect ratio */
  --split-major: 1.618fr;         /* 61.8% column of a split band */
  --split-minor: 1fr;             /* 38.2% column */
  --logo-height: 48px;
  --logo-height-mobile: 40px;
  --tap-min: 44px;
  --card-image-height: 18.5rem;   /* 296px fallback where aspect-ratio is unsupported */
  --hero-min-height: 100vh;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --motion-button: .3s;
  --motion-image: .8s;
  --motion-lift: .4s;
  --motion-fade: .8s;
  --fade-rise: 34px;
  --motion-underline: .8s;
  --motion-underline-delay: .4s;
}