/* ===================================================================
   DESIGN TOKENS — the single source of truth for the whole site.

   TWO TIERS:
     TIER 1 · PRIMITIVES  the raw ramp (primary / secondary / neutral).
                          Never referenced directly in styles.css.
     TIER 2 · SEMANTIC    role names (--c-heading, --c-accent, --gutter…)
                          that map primitives to a use. styles.css uses
                          ONLY these, via var(--…).
   Re-skin the site by editing Tier 1; re-map a role by editing Tier 2.

   RULE OF THUMB: a value earns a token only if it is REUSED. One-off
   values stay literal in styles.css.

   RESPONSIVE VALUES: don't make -mobile/-tablet/-desktop variants.
   Either use clamp() in one token (see --gutter), or redefine one token
   inside an @media block (see the SPACE section) — the cascade makes it
   responsive while the CSS rule never changes.
   =================================================================== */
:root {
  /* ================================================================
     TIER 1 · PRIMITIVES  (raw palette — don't use these in styles.css)
     ================================================================ */
  /* primary — icy blue: accents, links, dividers, focus */
  --primary: #8fb0c6;
  --primary-bright: #cfe0ec;
  --primary-line: #9fc0d8;
  --primary-deep: #2a6f8a;

  /* secondary — dawn blush: single emphasis accent */
  --secondary: #dcb9bb;
  --secondary-bright: #f0cdd2;

  /* neutrals — warm ivory → near-black navy */
  --neutral-0: #eef3f8; /* coolest near-white */
  --neutral-50: #f4efe6; /* warm ivory, brightest */
  --neutral-100: #f2ede4; /* warm ivory (headings/body) */
  --neutral-150: #e9eef4; /* cool pale (list names) */
  --neutral-200: #dce6ef;
  --neutral-300: #cdd6e0;
  --neutral-400: #aab4c4;
  --neutral-500: #9aa6b6;
  --neutral-850: #0e1626; /* raised surface: tiles, inputs */
  --neutral-875: #0c1320; /* surface: modal / drawer panel */
  --neutral-900: #0a0f1a; /* alternating section background */
  --neutral-950: #080c14; /* page base */

  /* mosaic tile tints — cycled across the hobbies tessellation.
     Used directly (each IS its own role), so they live in Tier 1. */
  --tile-1: #1a2233;
  --tile-2: #161f2b;
  --tile-3: #1d1b2e;
  --tile-4: #161d30;

  /* ================================================================
     TIER 2 · SEMANTIC  (what styles.css references)
     ================================================================ */
  /* surfaces */
  --c-bg: var(--neutral-950);
  --c-bg-alt: var(--neutral-900);
  --c-surface: var(--neutral-875);
  --c-surface-2: var(--neutral-850);

  /* text, by role */
  --c-heading: var(--neutral-100); /* primary heading ink */
  --c-heading-hi: var(--neutral-50); /* heading hover / brightest */
  --c-white: var(--neutral-0); /* near-white accents */
  --c-text: var(--neutral-300); /* body text */
  --c-text-soft: var(--neutral-400); /* muted body */
  --c-text-bright: var(--primary-bright); /* bright body accent */
  --c-btn-text: var(--neutral-200); /* button / pill labels */
  --c-name: var(--neutral-150); /* list item names */

  /* accents */
  --c-accent: var(--primary); /* eyebrows, rules, active tab */
  --c-muted: var(--neutral-500); /* meta labels */
  --c-placeholder: #8592a2; /* input placeholders — a touch darker than --c-muted; still ≥4.5:1 */
  --c-cyan: var(--primary-line); /* cool accent, contour art */
  --c-accent-deep: var(--primary-deep); /* active menu star */
  --c-pink: var(--secondary-bright); /* script + hover accent */
  --c-italic: var(--secondary); /* .accent italic emphasis */

  /* functional (translucent) — a solid primitive can't carry alpha, so
     these are literal rgba and live at the semantic tier by design */
  --c-border: rgba(160, 176, 196, 0.18);
  --c-border-soft: rgba(160, 176, 196, 0.16);
  --c-border-softer: rgba(160, 176, 196, 0.14);
  --c-border-line: rgba(160, 176, 196, 0.12);
  --c-border-pill: rgba(170, 180, 196, 0.3);
  --c-glass: rgba(8, 12, 20, 0.5); /* frosted floating buttons */
  --c-hover-fill: rgba(36, 50, 72, 0.92); /* button hover fill */
  --c-hover-border: rgba(143, 176, 198, 0.8); /* = --primary @ 80% */
  --c-shadow: rgba(4, 8, 16, 0.92); /* heading text-shadow (near) */
  --c-shadow-soft: rgba(4, 8, 16, 0.85); /* heading text-shadow (far) */

  /* gradient stops & component surfaces (specific navy shades, kept so the
     gradients / cards can be reused) */
  --c-hero-glow: #15202f; /* hero radial-gradient bright centre */
  --c-card-stop: #0b1119; /* project-card gradient dark stop */
  --c-searchbar: #101828; /* Ask "search bar" card surface */
  --c-searchbar-hover: #131d30; /* Ask card hover */

  /* ============ TYPOGRAPHY ============ */
  /* families */
  --font-serif: "Newsreader", serif; /* headings, editorial body */
  --font-mono: "IBM Plex Mono", monospace; /* eyebrows, labels, meta */
  --font-sans: "Hanken Grotesk", sans-serif; /* menu / UI */
  --font-script: "Tangerine", cursive; /* the "useful" flourish */

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  /* size scale (rem; 1rem = 16px) — consolidated to a tighter system */
  --fs-xs: 0.75rem; /* 12px  · smallest labels/tags */
  --fs-body-sm: 0.875rem; /* 14px  · meta labels, eyebrows, captions */
  --fs-body: 1rem; /* 16px  · standard UI/body text */
  --fs-body-lg: 1.125rem; /* 18px  · larger body copy */
  --fs-lead: 1.375rem; /* 22px  · prominent body / smaller headings */
  --fs-title: 1.625rem; /* 26px  · card titles, section subheads */
  --fs-display: 2.125rem; /* 34px  · medium display headings */
  --fs-display-lg: 2.5rem; /* 40px  · large section headings */
  --fs-hero: 3.375rem; /* 54px  · hero-scale headings */

  /* line-heights */
  --lh-none: 1;
  --lh-heading-tight: 1.08;
  --lh-heading: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  /* letter-spacing (tracking) */
  --ls-tight: 0.04em;
  --ls-meta: 0.12em;
  --ls-tag: 0.14em;
  --ls-wide: 0.16em;
  --ls-caps: 0.18em;
  --ls-label: 0.2em;
  --ls-eyebrow: 0.24em;

  /* ============ SPACE ============ */
  /* shared spacing tokens that still coordinate multiple rules */
  --space-12: 12px;
  --space-40: 40px;
  --space-48: 48px;

  /* Section side-padding — one clamp() covers mobile→desktop (no variants):
     20px floor on phones, ~4vw fluid, 64px cap on wide screens. */
  --gutter: clamp(20px, 4vw, 64px);

  /* Example of a *stepped* responsive token (redefine per breakpoint, don't
     fork the name). To adopt: use `padding-block: var(--section-y)` on the
     content sections and delete their mobile !important padding overrides.
       --section-y: 120px;
       @media (max-width: 680px) { :root { --section-y: 72px; } }  */

  /* ============ MOTION & EFFECTS ============ */
  --transition: 0.25s ease; /* one standard micro-transition (hover/colour/lift) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* standard UI easing (reveals, menu, hovers) */
  --blur: 6px; /* frosted-glass backdrop blur on floating buttons */
  /* heading text-shadow used where big type sits over imagery */
  --shadow-heading:
    0 2px 18px var(--c-shadow),
    0 1px 4px var(--c-shadow-soft);

  /* ============ RADII ============ */
  --r-round: 50%; /* avatars, circular icon buttons */
  --r-tile: 4px; /* project tiles — and the modal + its gallery, kept in sync */
  --r-sm: 10px; /* image wells */
  --r-md: 14px; /* suggest dropdown, cards */
}