/* ==========================================================================
   Hot Soap Studios: design tokens
   HOT (tungsten warmth, analog glow) + SOAP (mint, foam, clean air).
   Every colour, size, duration and layer used by base.css, components.css
   and the page stylesheets comes from here. See assets/DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
  /* ---- Palette -------------------------------------------------------- */
  --ink: #0F0D0C;            /* page background, warm black */
  --ink-2: #171413;          /* raised surface */
  --ink-3: #221F20;          /* brand charcoal, cards / inputs */
  --ink-4: #2C2827;          /* hover surface */
  --cream: #F3EBE0;          /* primary text on dark, light section bg */
  --cream-2: #E9DFD1;        /* cream surface on cream sections */
  --muted: #A39A90;          /* secondary text on dark (AA on --ink: 6.9:1) */
  --muted-ink: #6B6157;      /* secondary text on cream / mint (AA on --cream: 5.1:1) */
  --mint: #7CCCBF;           /* brand colour: accents, links, focus, residency bg */
  --mint-hi: #A7E9DC;        /* mint highlight */
  --mint-deep: #2F6A60;      /* mint for text/fills on light backgrounds (AA: 5.3:1 on cream, 4.8:1 on cream-2) */
  --hot: #FF6A2B;            /* tungsten orange: REC dot, live indicators, hover glows */
  --hot-soft: #FFB37A;       /* warm highlight for glows */
  --line: rgba(243, 235, 224, .12);      /* hairline on dark */
  --line-strong: rgba(243, 235, 224, .24);
  --line-ink: rgba(15, 13, 12, .14);     /* hairline on cream / mint */
  --line-ink-strong: rgba(15, 13, 12, .32);

  /* Contextual roles: sections override these (see .theme-cream / .theme-mint) */
  --bg: var(--ink);
  --fg: var(--cream);
  --fg-muted: var(--muted);
  --accent: var(--mint);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --surface: var(--ink-3);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --soft: "SOFT" 100, "WONK" 1;          /* Fraunces softness: the warm, fuzzy feeling */
  --soft-off: "SOFT" 0, "WONK" 0;

  /* Fluid scale (min @390px, max @1920px) */
  --fs-hero: clamp(3.4rem, 10.5vw, 11.5rem);
  --fs-xl: clamp(4rem, 11vw, 12.5rem);       /* XL statement (Rooms intro, Residency date) */
  --fs-d1: clamp(2.9rem, 7.2vw, 8.25rem);    /* section display */
  --fs-d2: clamp(2.3rem, 5vw, 5.75rem);
  --fs-d3: clamp(1.85rem, 3.4vw, 3.75rem);
  --fs-h4: clamp(1.4rem, 2vw, 2.1rem);
  --fs-h5: clamp(1.15rem, 1.35vw, 1.4rem);
  --fs-lead: clamp(1.12rem, 1.3vw, 1.38rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-mono: .72rem;          /* console labels */
  --fs-mono-lg: .8125rem;
  --lh-tight: .92;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --track-tight: -.025em;
  --track-mono: .14em;

  /* ---- Space & layout -------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);        /* page side padding */
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --section-y: clamp(5rem, 9vw, 9.5rem);        /* vertical section padding */
  --container: 1680px;
  /* Left/right edge that lines full-bleed rows (marquees, rails) up with .container content.
     Use in padding of a full-width element: % resolves against the containing block. */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --container-narrow: 1120px;
  --header-h: 84px;

  /* ---- Shape ----------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* expo-out */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.25, .8, .25, 1);
  --dur-1: .18s;
  --dur-2: .4s;
  --dur-3: .75s;

  /* ---- Elevation & glow ----------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-2: 0 30px 80px -20px rgba(0, 0, 0, .75);
  --glow-hot: 0 0 0 1px rgba(255, 106, 43, .35), 0 10px 40px -8px rgba(255, 106, 43, .45);
  --glow-mint: 0 0 0 1px rgba(124, 204, 191, .35), 0 10px 40px -8px rgba(124, 204, 191, .35);
  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--mint);

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 5;
  --z-preview: 40;           /* cursor-following image previews */
  --z-menu: 55;              /* full-screen menu sits under the header so the toggle stays on top */
  --z-header: 60;
  --z-modal: 80;
  --z-grain: 90;
  --z-curtain: 95;
  --z-cursor: 100;
  --z-preloader: 110;
}

/* Narrow screens: tighter header */
@media (max-width: 700px) {
  :root { --header-h: 68px; }
}
/* Phones: calmer console labels (less tracking, so mono captions do not wrap into blocks) */
@media (max-width: 760px) {
  :root { --track-mono: .08em; --fs-mono: .68rem; }
}