/* Maddlink — design tokens. Colours: docs/IDENTITY.md §2 (DECISIONS 2026-10-17: a light site, white dominates, three
   colours at most — white, ink, cyan). Motion: premium-motion-website, motion-language. Type families: css/fonts.css. */
:root {
  /* the 3 colours (IDENTITY §2) */
  --paper: #ffffff;      /* the site's background, panels, cards — dominant */
  --ink: #1c1c1c;        /* main text, logo — 17.0:1 on paper */
  --cyan: #19f0ff;       /* the brand cyan, as a fill: buttons, active pills, pulses, dots — ink on it 12.1:1 */
  --cyan-deep: #19f0ff;  /* icons, strokes, rings, focus: the one brand cyan everywhere (D33 — the deep teal #0b818d
                            read as a grey blue); never a text colour on white (1.3:1): text stays ink, a cyan line marks it */
  --on-cyan: #1c1c1c;    /* text on cyan */

  /* steps of the same three (greys of the ink on white, veils of the cyan) — not new colours */
  --card: #ffffff;       /* vignettes, panels, pins */
  --raised: #f7f7f7;     /* a card under the pointer, a pressed control, a quiet fill */
  --line: #ebebeb;       /* borders */
  --line-strong: #dddddd;
  --ink-muted: #6a6a6a;  /* secondary text — 5.4:1 on paper, 5.1:1 on raised */
  --ink-soft: #3d3d3d;   /* long reading text — 10.9:1 */
  --arc-rest: #b4b4b4;   /* arcs at rest (decorative) */
  --scrim: rgba(255, 255, 255, 0.86);
  --glass: rgba(255, 255, 255, 0.9);
  --cyan-soft: rgba(25, 240, 255, 0.16);
  --cyan-glow: rgba(25, 240, 255, 0.3);

  /* the 12 universes share the one cyan (three colours at most): each is told by its icon and its label, never by a
     colour (WCAG 1.4.1). The names stay so the code reads which universe it means. */
  --universe-build: var(--cyan-deep);
  --universe-crafts: var(--cyan-deep);
  --universe-security: var(--cyan-deep);
  --universe-wellbeing: var(--cyan-deep);
  --universe-tech: var(--cyan-deep);
  --universe-creative: var(--cyan-deep);
  --universe-home: var(--cyan-deep);
  --universe-food: var(--cyan-deep);
  --universe-business: var(--cyan-deep);
  --universe-mobility: var(--cyan-deep);
  --universe-learning: var(--cyan-deep);
  --universe-leisure: var(--cyan-deep);

  /* shapes: round everywhere (IDENTITY §4) */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-pin: 0 1px 2px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.12);

  /* rhythm */
  --gutter: clamp(16px, 2.6vw, 40px);
  --header-h: 72px;
  --bar-h: 76px;          /* the universe bar under the header */
  --section-pad: clamp(64px, 12vh, 140px);
  --list-w: clamp(420px, 42vw, 640px);
  --tap: 44px;            /* minimum touch target (EXPERIENCE §9) */

  /* type scale */
  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.6rem, 1.15rem + 1.6vw, 2.3rem);
  --step-4: clamp(2rem, 1.25rem + 2.9vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.2vw, 4.9rem);

  /* motion (motion-language) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out — arrivals, appearances */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);  /* power3.inOut (a quart curve in GSAP) — camera flights */
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);      /* power2.in (a cubic curve in GSAP) — exits */

  /* layers (z-index), from the map up */
  --z-map: 0;
  --z-pins: 2;
  --z-panel: 10;
  --z-profile: 20;
  --z-sheet: 22;
  --z-header: 30;
  --z-flight: 40;
  --z-menu: 50;
  --z-notes: 60;
  --z-toast: 65;
  --z-iris: 70;
  --z-cursor: 80;

  color-scheme: light;
}

@media (max-width: 767px) {
  :root { --header-h: 60px; --bar-h: 64px; }
}