/* ==========================================================================
   Magichouse Media — design tokens
   The ONLY place a raw value is written. Everything else references these.
   A client site is a copy of this file with different values, not a fork.
   Layout, palette and copy from Magichouse One-Pager.html.
   Typography per Max, 2026-08-28: PP Telegraf / Satoshi / PP Right Gothic.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   PP Telegraf ships 200 / 400 / 800 only. Headings resolve to 800; there is
   no 600 or 700, so never ask for one — the browser will synthesise it and
   it looks wrong next to the real cut.                                      */

@font-face { font-family:'PP Telegraf'; src:url('../fonts/PPTelegraf-Ultralight.woff2') format('woff2');
             font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Telegraf'; src:url('../fonts/PPTelegraf-Regular.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Telegraf'; src:url('../fonts/PPTelegraf-UltraBold.woff2') format('woff2');
             font-weight:800; font-style:normal; font-display:swap; }

@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Bold.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }

/* Accent: italic only, one or two words inside a heading. Never body,
   never UI, never navigation, never buttons, never labels.                  */
@font-face { font-family:'PP Right Gothic'; src:url('../fonts/PPRightGothic-WideMediumItalic.woff2') format('woff2');
             font-weight:400 700; font-style:italic; font-display:swap; }

:root {
  /* --- Color -------------------------------------------------------------
     Dark-first. Text steps are opacity ramps on one ink value, not new
     colors, so a client palette only redefines four things.                 */
  --bg:              #0A0A0C;
  --surface:         #16161B;   /* cards — lifted a step so they read off the band */
  --surface-sunken:  #0E0E12;

  /* Alternating section grounds. Page runs base → band → base → band …, so a
     long scroll has rhythm instead of one flat slab of near-black. Kept close
     together on purpose: the step should register as depth, not as stripes.
     Every text/background pair here still clears WCAG AA. */
  --band:            #121217;
  --band-edge:       rgba(var(--ink), 0.06);
  --ink:             247, 246, 242;
  --accent:          #FFE600;
  --on-accent:       #0A0A0C;

  --text:            rgb(var(--ink));
  --text-strong:     rgba(var(--ink), 0.92);
  --text-muted:      rgba(var(--ink), 0.78);
  --text-subtle:     rgba(var(--ink), 0.50);
  --hairline:        rgba(var(--ink), 0.10);
  --hairline-strong: rgba(var(--ink), 0.18);
  --accent-soft:     rgba(255, 230, 0, 0.16);

  /* --- Type --------------------------------------------------------------- */
  --font-display: 'PP Telegraf', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-accent:  'PP Right Gothic', 'PP Telegraf', sans-serif;

  --w-display:  800;   /* the only heading weight that exists */
  --w-light:    200;
  --w-body:     400;
  --w-medium:   500;
  --w-bold:     700;

  --fs-label:   12px;   /* was 11px — below comfortable reading size */
  --fs-xs:      13px;
  --fs-sm:      14px;
  --fs-base:    16px;
  --fs-md:      17px;
  --fs-lg:      19px;
  --fs-xl:      21px;
  --fs-2xl:     24px;
  --fs-3xl:     32px;
  --fs-4xl:     clamp(30px, 4vw, 46px);
  --fs-5xl:     clamp(38px, 5vw, 56px);
  --fs-display: clamp(42px, 6.4vw, 84px);

  --lh-tight:   1.04;
  --lh-heading: 1.2;
  --lh-body:    1.6;

  --track-tight: -0.02em;
  --track-label:  0.10em;

  /* --- Space (4px base) --------------------------------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px; --s-6:24px;  --s-7:32px;  --s-8:40px;
  --s-9:56px; --s-10:72px; --s-11:96px; --s-12:128px;

  --section-y: clamp(64px, 9vw, 128px);
  --nav-h:     72px;    /* sticky header height; scroll-padding-top depends on it */
  --tap:       44px;    /* minimum touch target */
  --gutter:    clamp(20px, 4vw, 48px);
  --measure:   1680px;

  /* --- Shape and motion --------------------------------------------------- */
  --r-pill:999px; --r-card:24px; --r-lg:28px; --r-sm:12px;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 160ms;
  --dur-menu: 320ms;
}