/* ==========================================================================
   Souhail Razik — v4 tokens
   --------------------------------------------------------------------------
   v4 is the v3 design system moved onto a cinematic stage. What carries
   over unchanged: the two families (Newsreader for display, IBM Plex Sans
   for everything else), square corners, bronze as the only accent, SVG-only
   icons. What changes: the page is dark-only, the stage colour is taken
   from the portrait's own background, and bronze may glow as light.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* Stage */
  --stage:        #0e0c09;
  --stage-rgb:    14, 12, 9;
  --raised:       #17140f;
  --raised-2:     #211c15;

  /* Ink */
  --ink:          #f2ece2;
  --ink-rgb:      242, 236, 226;
  --ink-muted:    #a89d8c;
  --ink-subtle:   #7d7366;

  /* Bronze — the only accent. Glow is the same hue, used only as light. */
  --bronze:       #c9a36a;
  --bronze-rgb:   201, 163, 106;
  --bronze-deep:  #7a5228;
  --glow:         #f1d6a6;

  /* Rules */
  --rule:         #2b261e;
  --rule-strong:  #4a4236;

  /* Type */
  --font-serif: Newsreader, "Iowan Old Style", Georgia, serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --t-name:      clamp(3.6rem, 13.5vw, 13rem);
  --t-display:   clamp(2.6rem, 7.2vw, 6.75rem);
  --t-h2:        clamp(2.1rem, 5vw, 4.25rem);
  --t-h3:        clamp(1.45rem, 2.3vw, 2rem);
  --t-manifesto: clamp(1.9rem, 4.4vw, 4rem);
  --t-num:       clamp(5rem, 16vw, 14rem);
  --t-lede:      clamp(1.125rem, 1.4vw, 1.35rem);
  --t-body:      1.0625rem;
  --t-small:     .9375rem;
  --t-meta:      .8125rem;

  --lh-tight: 1.02;
  --lh-head:  1.08;
  --lh-body:  1.66;

  /* Space */
  --measure: 34rem;
  --shell: 84rem;
  --gutter: clamp(1rem, 4.5vw, 4rem);
  --section-y: clamp(6rem, 16vh, 12rem);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur-1: 200ms;
  --dur-2: 500ms;
  --dur-3: 900ms;

  --radius-sm: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}