/* =====================================================================================================
   Mediaway design tokens  ·  v1.0  ·  2026-11-06  ·  source of truth: mediaway/06-brand/tokens.json
   One night canvas, one warm light. Amber (--mw-amber) is the lighthouse light: besides the logo's full stop, use it for ONE thing per
   view (the main button OR a lit full stop ending one headline). Never as a background wash.
   ===================================================================================================== */

@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist";  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---------------------------------------------------------------- colour: night (default, dark) */
  --mw-night:        #050608;  /* page canvas. The brand is dark-first. */
  --mw-panel:        #0A0D12;  /* sunken panels, footers, code blocks */
  --mw-surface:      #0B0E13;  /* cards, bars, sheets on the canvas */
  --mw-raised:       #12161D;  /* hover state of a surface, inputs */
  --mw-line:         rgba(238, 240, 243, 0.08);  /* hairlines, card borders */
  --mw-line-strong:  rgba(238, 240, 243, 0.14);  /* focused borders, dividers that must be seen */

  --mw-ink:          #EEF0F3;  /* primary text and the logo on dark. 17.8:1 on night */
  --mw-ink-soft:     #959DA9;  /* body copy, secondary text. 7.4:1 on night */
  --mw-ink-quiet:    #6E7683;  /* second line of two-tone headings, large text only. 4.4:1, use at 24px+ only */
  --mw-ink-dim:      #343A44;  /* disabled, "not yet read" words, decorative only */

  /* ---------------------------------------------------------------- colour: the light */
  --mw-amber:        #FFB547;  /* THE accent. Logo light, primary button, one highlight per view. 11.5:1 on night */
  --mw-amber-hover:  #FFC46B;  /* hover/pressed state of amber buttons */
  --mw-amber-ink:    #1A1203;  /* text and icons ON amber. 10.6:1 */
  --mw-amber-text:   #9A5B00;  /* amber-family TEXT on paper/white (links, labels). 4.8:1 on paper */
  --mw-amber-day:    #EE9418;  /* the light on PAPER/white: the full stop in the logo, one graphic accent. 2.1:1, never for text */
  --mw-amber-glow:   rgba(255, 181, 71, 0.16);  /* focus rings and the faint halo in the logo animation only */

  /* ---------------------------------------------------------------- colour: day (print, documents, light UI) */
  --mw-paper:        #F4F1EA;  /* light canvas: proposals, invoices, business cards, light sections. Dune sand, not white */
  --mw-paper-2:      #EAE6DC;  /* surfaces on paper: table stripes, boxes */
  --mw-paper-line:   rgba(5, 6, 8, 0.12);
  --mw-ink-on-paper: #050608;  /* text and logo on paper. 18.0:1 */
  --mw-soft-on-paper:#5A606B;  /* secondary text on paper. 5.6:1 */

  /* ---------------------------------------------------------------- colour: support (rare) */
  --mw-sea:          #7FA6C9;  /* night sea. Progress bars, charts, map details. Never for buttons or the logo */
  --mw-ok:           #6CCB9A;  /* form success, "live" status dot */
  --mw-error:        #F2675A;  /* form errors only */

  /* ---------------------------------------------------------------- type */
  --mw-font-display: "Outfit", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mw-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mw-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --mw-weight-display: 400;   /* Outfit headings are ALWAYS 400. Never bold headlines. */
  --mw-weight-text:    400;
  --mw-weight-strong:  560;   /* Geist emphasis, button labels */
  --mw-track-display: -0.04em; /* headings >= 28px */
  --mw-track-snug:    -0.02em; /* headings 18-28px */
  --mw-track-text:    -0.005em;
  --mw-track-label:    0.04em; /* uppercase pill labels, 11-12px */
  --mw-leading-tight: 1.06;
  --mw-leading-snug:  1.2;
  --mw-leading-body:  1.6;

  /* fluid scale (web) */
  --mw-t-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --mw-t-sm:  clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --mw-t-base:clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --mw-t-lg:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --mw-t-xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --mw-t-2xl: clamp(2.1rem, 1.35rem + 2.7vw, 3.5rem);
  --mw-t-3xl: clamp(2.6rem, 1.4rem + 4.2vw, 4.8rem);
  --mw-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);
  /* fixed scale (social posts, print, documents), in px at 1080px-wide canvas or pt in print */
  --mw-fs-12: 12px; --mw-fs-14: 14px; --mw-fs-16: 16px; --mw-fs-20: 20px; --mw-fs-24: 24px;
  --mw-fs-32: 32px; --mw-fs-44: 44px; --mw-fs-60: 60px; --mw-fs-84: 84px; --mw-fs-120: 120px;

  /* ---------------------------------------------------------------- shape */
  --mw-r-xs: 4px;
  --mw-r-sm: 6px;
  --mw-r-md: 12px;
  --mw-r-lg: 20px;
  --mw-r-card: 28px;
  --mw-r-pill: 999px;
  --mw-r-door: 999px 999px 0 0;  /* the arch from the logo: image frames, hero cut-outs. Use on tall boxes (h >= 1.3w) */

  /* ---------------------------------------------------------------- space (4px base) */
  --mw-s-1: 4px;  --mw-s-2: 8px;  --mw-s-3: 12px; --mw-s-4: 16px; --mw-s-5: 24px;
  --mw-s-6: 32px; --mw-s-7: 48px; --mw-s-8: 64px; --mw-s-9: 96px; --mw-s-10: 128px; --mw-s-11: 192px;
  --mw-gutter:  clamp(20px, 5vw, 48px);
  --mw-section: clamp(4.5rem, 9vw, 11rem);
  --mw-maxw:    1180px;
  --mw-measure: 62ch;

  /* ---------------------------------------------------------------- depth */
  --mw-shadow-color: 220 60% 1%;
  --mw-shadow-sm: 0 1px 2px hsl(var(--mw-shadow-color) / 0.5);
  --mw-shadow-md: 0 2px 4px hsl(var(--mw-shadow-color) / 0.4), 0 8px 24px hsl(var(--mw-shadow-color) / 0.45);
  --mw-shadow-lg: 0 4px 8px hsl(var(--mw-shadow-color) / 0.4), 0 24px 64px hsl(var(--mw-shadow-color) / 0.6);
  --mw-edge: inset 0 1px 0 rgba(238, 240, 243, 0.06);   /* top highlight on dark cards */
  --mw-focus: 0 0 0 3px var(--mw-amber-glow), 0 0 0 1px var(--mw-amber);

  /* ---------------------------------------------------------------- motion */
  --mw-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --mw-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mw-ease-light:  cubic-bezier(0.2, 0.7, 0.1, 1);   /* the lamp switching on */
  --mw-d-fast: 160ms; --mw-d-base: 240ms; --mw-d-slow: 420ms;
  --mw-d-logo: 1700ms;                                   /* logo intro, see logo/motion/mediaway-intro.svg */

  /* ---------------------------------------------------------------- logo ("mediaway." wordmark, "m." symbol) */
  --mw-logo-min-wordmark: 80px;  /* wordmark width on screen (25 mm in print). Smaller: use the symbol "m." */
  --mw-logo-min-stacked: 48px;   /* stacked "media / way." width (15 mm in print) */
  --mw-logo-min-symbol: 16px;    /* "m." width; below 48px use logo/favicon/ (pixel-snapped) */
  --mw-logo-clear: 1;            /* clear space = 1 x-height of the logo on every side (see BRAND.md) */
  --mw-logo-ratio: 4.903;        /* wordmark width / height (938 x 191.3 units) */
  --mw-stop: var(--mw-amber);    /* the full stop: logo, end of ONE key headline per view, bullets, live dot */
}
.mw-day { --mw-stop: var(--mw-amber-day); }

/* Light context: wrap a section, a document or a card in .mw-day to switch roles to paper. */
.mw-day {
  --mw-night: var(--mw-paper);
  --mw-surface: #FBF9F4;
  --mw-panel: var(--mw-paper-2);
  --mw-raised: #FFFFFF;
  --mw-line: var(--mw-paper-line);
  --mw-line-strong: rgba(5, 6, 8, 0.2);
  --mw-ink: var(--mw-ink-on-paper);
  --mw-ink-soft: var(--mw-soft-on-paper);
  --mw-ink-quiet: #7A808A;
  --mw-ink-dim: #C9C5BB;
  color-scheme: light;
}

/* Aliases for the ScrollCraft site engine (scrollcraft/builds/mediaway): map once, then use --mw-* */
:root {
  --sc-canvas: var(--mw-night);
  --sc-surface: var(--mw-surface);
  --sc-ink: var(--mw-ink);
  --sc-ink-soft: var(--mw-ink-soft);
  --sc-accent: var(--mw-amber);
  --sc-accent-ink: var(--mw-amber-ink);
  --sc-font-display: var(--mw-font-display);
  --sc-font-text: var(--mw-font-text);
}

/* ---------------------------------------------------------------- reusable brand primitives */
.mw-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--mw-r-pill);
  font: 400 13px/1.2 var(--mw-font-text); color: var(--mw-ink-soft);
  background: rgba(238, 240, 243, 0.05); border: 1px solid var(--mw-line);
}
.mw-pill--light::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mw-amber); }
.mw-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--mw-r-pill);
  font: var(--mw-weight-strong) 15px/1 var(--mw-font-text); background: var(--mw-amber); color: var(--mw-amber-ink);
  border: 0; text-decoration: none; transition: background var(--mw-d-fast) var(--mw-ease-out);
}
.mw-btn:hover { background: var(--mw-amber-hover); }
.mw-btn--ghost { background: transparent; color: var(--mw-ink); box-shadow: inset 0 0 0 1px var(--mw-line-strong); }
.mw-h1, .mw-h2 { font-family: var(--mw-font-display); font-weight: 400; letter-spacing: var(--mw-track-display); line-height: var(--mw-leading-tight); }
.mw-door { border-radius: var(--mw-r-door); overflow: hidden; }
/* the lit full stop as a typographic device: <h2 class="mw-h2">Wat werkt, moet werken<span class="mw-stop">.</span></h2> */
.mw-stop { color: var(--mw-stop); }
/* inline logo: <img class="mw-logo" src="logo/mediaway-wordmark-night.svg" alt="Mediaway"> sized by height */
.mw-logo { display: block; height: 28px; width: auto; }