/* ============================================================
   DESIGN TOKENS — all values live here
   Edit this file as design direction comes in.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-display: 'Exemplar', serif;
  --font-ui:      'Exemplar Sans', system-ui, sans-serif;
  --font-body:    'Exemplar Sans', system-ui, sans-serif;

  /* Scale (fluid via clamp — desktop → mobile).
     --text-xs is the floor: nothing on the site sets type smaller. */
  --text-xs:   clamp(0.75rem,  1.2vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 1.4vw, 1rem);
  --text-base: clamp(1rem,     1.6vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.8vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  2.5vw, 1.75rem);
  --text-2xl:  clamp(1.5rem,   3.5vw, 2.5rem);
  --text-3xl:  clamp(2rem,     5vw,   4rem);
  --text-4xl:  clamp(3rem,     7vw,   7rem);
  --text-5xl:  clamp(4rem,    10vw,  12rem);

  /* ----------------------------------------------------------
     COLOUR
     The site is black-only — there is no light theme. Tell the UA
     so form controls, scrollbars and the overscroll gutter render
     dark regardless of the visitor's OS setting.
  ---------------------------------------------------------- */
  color-scheme: dark;

  --color-bg:       #000000;
  --color-surface:  #161616;
  --color-border:   #2a2a2a;
  --color-text:     #f0f0f0;
  --color-text-mid: #aaaaaa;
  --color-text-dim: #555555;
  --color-accent:   #ffffff;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-max:    1440px;
  --container-gutter: clamp(1rem, 4vw, 5rem);

  --grid-cols: 12;
  --grid-gap:  clamp(0.75rem, 2vw, 1.5rem);

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-xslow: 1000ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.87, 0, 0.13, 1);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ----------------------------------------------------------
     BORDERS / RADIUS
  ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border:       var(--border-width) solid var(--color-border);

}