/* ============================================================
   TOKENS
   Fluid scale interpolates between a 20rem (320px) and a
   100rem (1600px) viewport, then clamps at both ends.
   Formula: clamp(MIN, calc(I + S*vw), MAX)
            S = (MAX - MIN) * 1.25
            I = MIN - (MAX - MIN) / 4
   ============================================================ */

:root {
  /* ---- viewport range the fluid scale is built on ---- */
  --site--viewport-min: 20;
  --site--viewport-max: 100;

  /* ---- swatches ---- */
  --swatch--black-400: #080807; /* page background */
  --swatch--black-300: #393632; /* hairlines / borders */
  --swatch--black-200: #524d47;
  --swatch--black-100: #6b645c;
  --swatch--black-50:  #938f8a;
  --swatch--card-bg:   #181715;

  --swatch--beige-100: #e8e8e3; /* primary text on dark */
  --swatch--beige-150: #fafaf9; /* hover highlight */
  --swatch--beige-200: #ddddd5;
  --swatch--beige-300: #d1d1c7;
  --swatch--beige-400: #bfbfb1;
  --swatch--beige-600: #8c8c73;

  --swatch--transparent: transparent;
  --swatch--brand-text: var(--swatch--beige-100);
  --swatch--brand-text-o20: color-mix(in srgb, var(--swatch--brand-text) 20%, transparent);

  /* ---- typefaces ----
     Free stand-ins for the commercial faces this design system
     was originally set in. Swap these three lines to rebrand. */
  --font--primary:   'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font--display:   'Space Grotesk', 'Inter Tight', Arial, sans-serif;
  --font--mono:      'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Logo/wordmark face — see assets/fonts/Griaste-LICENSE.txt.
     The bundled file is the DEMO release: personal use only.
     A commercial licence is required before public launch. */
  --font--logo:      'Griaste', 'Space Grotesk', Arial, sans-serif;

  --font--primary-weight: 400;
  --font--medium-weight:  500;
  --font--trim-top:    0.38em;
  --font--trim-bottom: 0.38em;

  /* ---- type scale ---- */
  --fs--display:       clamp(5rem,      calc(3.9375rem  + 5.3125vw),  9.25rem);
  --fs--display-small: clamp(4rem,      calc(3rem       + 5vw),       8rem);
  --fs--h1:            clamp(2.25rem,   calc(1.9375rem  + 1.5625vw),  3.5rem);
  --fs--h2:            clamp(3rem,      calc(2.5625rem  + 2.1875vw),  4.75rem);
  --fs--h3:            clamp(2rem,      calc(1.625rem   + 1.875vw),   3.5rem);
  --fs--h4:            clamp(1.5rem,    calc(1.125rem   + 1.875vw),   3rem);
  --fs--h5:            clamp(1.375rem,  calc(1.34375rem + 0.15625vw), 1.5rem);
  --fs--h6:            clamp(1rem,      calc(0.96875rem + 0.15625vw), 1.125rem);
  --fs--large:         clamp(1.125rem,  calc(1.09375rem + 0.15625vw), 1.25rem);
  --fs--main:          clamp(1rem,      calc(0.96875rem + 0.15625vw), 1.125rem);
  --fs--small:         clamp(0.875rem,  calc(0.84375rem + 0.15625vw), 1rem);
  --fs--xsmall:        clamp(0.65rem,   calc(0.625rem   + 0.125vw),   0.75rem);
  --fs--micro:         clamp(0.6rem,    calc(0.5875rem  + 0.0625vw),  0.65rem);

  /* ---- line heights ---- */
  --lh--0-9: 0.9;
  --lh--1:   1;
  --lh--1-1: 1.1;
  --lh--1-3: 1.3;
  --lh--1-5: 1.5;

  /* ---- tracking ---- */
  --ls--0-01: -0.01em;
  --ls--0-015: -0.015em;
  --ls--0-03: -0.03em;

  /* ---- spacing ---- */
  --space--1: clamp(0.375rem, calc(0.34375rem + 0.15625vw), 0.5rem);
  --space--2: clamp(0.625rem, calc(0.59375rem + 0.15625vw), 0.75rem);
  --space--3: clamp(0.875rem, calc(0.84375rem + 0.15625vw), 1rem);
  --space--4: clamp(1.25rem,  calc(1.1875rem  + 0.3125vw),  1.5rem);
  --space--5: clamp(1.75rem,  calc(1.6875rem  + 0.3125vw),  2rem);
  --space--6: clamp(2rem,     calc(1.875rem   + 0.625vw),   2.5rem);
  --space--7: clamp(2.25rem,  calc(2.0625rem  + 0.9375vw),  3rem);
  --space--8: clamp(2.5rem,   calc(2.125rem   + 1.875vw),   4rem);

  --section-space--small:    clamp(3rem,   calc(2.5rem   + 2.5vw),   5rem);
  --section-space--main:     clamp(4rem,   calc(3.25rem  + 3.75vw),  7rem);
  --section-space--large:    clamp(5.5rem, calc(4.375rem + 5.625vw), 10rem);
  --section-space--page-top: clamp(7rem,   calc(5.25rem  + 8.75vw),  14rem);

  /* ---- layout grid ---- */
  --site--column-count: 12;
  --site--gutter: 1rem;
  --site--margin: clamp(0.75rem, calc(0.5rem + 1.25vw), 1.75rem);
  --max-width--main: calc(var(--site--viewport-max) * 1rem);
  --max-width--full: 100%;

  --site--column-width: calc(
    (min(var(--max-width--main), 100% - var(--site--margin) * 2)
      - (var(--site--gutter) * (var(--site--column-count) - 1)))
    / var(--site--column-count)
  );
  --grid-breakout:
    [full-start] minmax(0, 1fr)
    [content-start] repeat(var(--site--column-count), minmax(0, var(--site--column-width)))
    [content-end] minmax(0, 1fr) [full-end];

  /* ---- radii / borders ---- */
  --radius--main:   1rem;
  --radius--medium: 0.35rem;
  --radius--small:  0.15rem;
  --radius--round:  100vw;
  --border-width--main: 0.094rem;

  /* ---- motion ----
     CSS mirrors of the GSAP CustomEase curves registered in main.js */
  --ease--primary:    cubic-bezier(0.55, 0, 0.7, 0);
  --ease--secondary:  cubic-bezier(0.31, 0.75, 0.22, 1);
  --ease--fade:       cubic-bezier(0.76, 0, 0.24, 1);
  --ease--transition: cubic-bezier(0.22, 1, 0.36, 1);
  --ease--menu:       cubic-bezier(0.7, 0, 0.22, 1);
  --duration-fast: 0.45s;

  /* ---- focus ---- */
  --focus--width: 0.125rem;
  --focus--offset-outer: 0.1875rem;
}

/* ============================================================
   THEMES
   Sections opt in with .u-theme-dark / .u-theme-light.
   ============================================================ */

:root,
.u-theme-dark {
  --theme--background: var(--swatch--black-400);
  --theme--background-2: var(--swatch--card-bg);
  --theme--text: var(--swatch--beige-100);
  --theme--text-muted: var(--swatch--black-50);
  --theme--border: var(--swatch--black-300);
  --theme--heading-accent: var(--swatch--beige-400);
  --theme--selection-bg: var(--swatch--beige-300);
  --theme--selection-text: var(--swatch--black-400);

  --theme--btn-bg: var(--swatch--beige-400);
  --theme--btn-bg-hover: var(--swatch--beige-100);
  --theme--btn-text: var(--swatch--black-400);
  --theme--btn-aside: var(--swatch--black-300);
}

.u-theme-light {
  --theme--background: var(--swatch--beige-100);
  --theme--background-2: var(--swatch--beige-300);
  --theme--text: var(--swatch--black-400);
  --theme--text-muted: var(--swatch--black-100);
  --theme--border: var(--swatch--beige-400);
  --theme--heading-accent: var(--swatch--beige-600);
  --theme--selection-bg: var(--swatch--black-400);
  --theme--selection-text: var(--swatch--beige-100);

  --theme--btn-bg: var(--swatch--black-400);
  --theme--btn-bg-hover: var(--swatch--black-300);
  --theme--btn-text: var(--swatch--beige-100);
  --theme--btn-aside: var(--swatch--beige-400);
}

.u-theme-dark,
.u-theme-light {
  background-color: var(--theme--background);
  color: var(--theme--text);
}