/* ==========================================================================
   CHIMAERA — Design tokens
   Single source of truth for colour, type, spacing and motion values.
   Change values here, not in component files.
   ========================================================================== */

:root {
  /* ---- Colour: the coral/pale relationship is the whole brand ---- */
  --color-coral: #e35039;          /* primary brand coral/red-orange, sampled from source material */
  --color-coral-deep: #c73e29;     /* pressed / shadow-adjacent coral */
  --color-coral-soft: #f0a99a;     /* tint, used sparingly for hover washes */
  --color-pale: #f1f6f8;           /* ice blue-white field */
  --color-pale-warm: #f7efec;      /* warm-leaning pale, seen where the atmosphere blooms out of coral */
  --color-ink: #1a1a1a;            /* near-black body text on pale */
  --color-ink-25: rgba(26, 26, 26, 0.25); /* --color-ink at 25% — event poster keyline */
  --color-ink-30: rgba(26, 26, 26, 0.3); /* --color-ink at 30% — rules/borders on ink text, never full opacity (would fail contrast) */
  --color-ink-45: rgba(26, 26, 26, 0.45); /* --color-ink at 45% — dashed rules (event cards) */
  --color-ink-70: rgba(26, 26, 26, 0.7);   /* --color-ink at 70% — badges over photos (archive play), homepage thread */
  --color-pale-warm-20: rgba(247, 239, 236, 0.2); /* --color-pale-warm at 20% — rules on ink (footer) */
  --color-pale-warm-50: rgba(247, 239, 236, 0.5); /* --color-pale-warm at 50% — input borders/placeholders on ink */
  --color-white: #ffffff;          /* text / rules on coral */

  /* ---- Atmosphere tuning (read once by js/atmosphere.js at load) ----
     Change these to tune the field site-wide; no JS edits needed.
     Per-section coverage stops live in js/homepage.js (STOPS). */
  --atmosphere-coral: var(--color-coral);   /* coral side colour (hex) */
  --atmosphere-pale: var(--color-pale);     /* pale side colour (hex) */
  --atmosphere-coral-intensity: 1;          /* coral alpha, 0–1 */
  --atmosphere-opacity: 1;                  /* whole canvas opacity, 0–1 */
  --atmosphere-speed: 1;                    /* × wobble/drift speed */
  --atmosphere-amplitude: 1;                /* × wobble/drift distance */
  --atmosphere-softness: 1;                 /* × edge softness/blur */
  --atmosphere-mouse: 1;                    /* × cursor push (desktop); 0 = off */
  --atmosphere-breath: 0.03;                /* idle breath: boundary swing, fraction of width; 0 = off */
  --atmosphere-breath-period: 8;            /* idle breath: seconds per breath */
  --atmosphere-breath-softness: 0.2;        /* idle breath: how much the edge softens/sharpens */
  --atmosphere-midpoint-lock: -1;           /* pin boundary 0–1; -1 = follow sections */

  /* ---- Typography ----
     Served by Adobe Fonts, kit koo7phy (see the <link> tags in each
     page's <head>) — not self-hosted.

     banner  = huge/hero headlines
     display = H2-weight headings, bold editorial marks, nav links
     text    = body copy
     micro   = small utility labels (e.g. footer links)
     serif   = italic accents (eyebrows, captions, connectors) */
  --font-banner: "forma-djr-greek-banner", sans-serif;
  --font-display: "forma-djr-greek-display", sans-serif;
  --font-text: "forma-djr-greek-text", sans-serif;
  --font-micro: "forma-djr-greek-micro", sans-serif;
  --font-serif: "minion-pro", serif;

  /* Modular type scale (rem, ~1.25 ratio, tuned by hand at the extremes) */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-4: clamp(2.8rem, 2.1rem + 3.5vw, 4.5rem);
  --step-5: clamp(3.6rem, 2.4rem + 6vw, 7rem);
  --step-6: clamp(4.4rem, 2.4rem + 10vw, 10.5rem);

  /* ---- Body text ---- */
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16px mobile → 17px desktop */
  --leading-body: 1.5;
  --measure: 62ch;

  /* ---- Small UI text ----
     Deliberately-small text that isn't a body paragraph: labels,
     eyebrows, captions, compact inline info (next-event date/venue).
     One consistent size instead of three accidental ones. */
  --text-small: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 12px mobile → 13px desktop */

  /* ---- Space scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Structure ---- */
  --rule-width: 1px;
  --rule-width-strong: 1.5px; /* secondary (outline) buttons */
  --column-gap: var(--space-l);
  --page-margin: clamp(1.25rem, 1rem + 2vw, 3rem);
  --content-max-width: 60rem; /* capped reading/content width — first used by .next-event */
  --section-max-width: 80rem; /* homepage two-column sections (01–05): content box width on wide screens */
  --tap-target-min: 3rem; /* 48px — minimum interactive target height */
  --poster-ratio: 4 / 5; /* event posters are Instagram 4:5 (1080×1350) — frames match so the whole poster shows */

  /* ---- Elevation ---- */
  --shadow-soft: 0 0.625rem 1.5rem rgba(26, 26, 26, 0.18); /* --color-ink at 18% — 04 collage photos */

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Homepage landing: smallest height before the next-event strip is pushed below the fold */
  --landing-min-height: 26rem;

  /* Homepage thread (dashed line through 02–04) */
  --thread-color: var(--color-ink-70);
  --thread-width: 2.5px;
  --thread-dash: 12px 9px;
  --thread-lead: 0.75; /* where the line's tip sits, as a fraction of viewport height (read by js/homepage.js) */
  --duration-fast: 180ms;
  --duration-medium: 420ms;
  --duration-slow: 900ms;

  /* Subpages (about, contact): space kept clear under the fixed header */
  --header-clearance: 5.5rem;

  /* Chalk circle drawn round the footer newsletter box when a #footer link
     is followed (js/chalk-circle.js). Coral, the atmosphere colour, on ink. */
  --chalk-color: var(--color-coral);
  --chalk-width: 3.5px;
  --chalk-duration: 1100ms; /* drawing */
  --chalk-hold: 2500ms;     /* stays fully visible after drawing */
  --chalk-fade: 900ms;      /* then fades out and is removed */
}

/* Narrow screens: almost all coral, barely moving. Read once at page load. */
@media (max-width: 63.99rem) {
  :root {
    --atmosphere-midpoint-lock: 0.95;
    --atmosphere-speed: 0.5;
    --atmosphere-amplitude: 0.35;
    --atmosphere-breath: 0.008;
    --atmosphere-breath-softness: 0.1;
  }
}

@media (prefers-color-scheme: dark) {
  /* CHIMAERA's identity is the coral/pale relationship itself, not a
     light/dark mode — we deliberately keep one authored palette rather
     than inverting it. Reserved here in case that changes later. */
}