/* Marifat Jamal site: design tokens.
   One ground per scene (ink for film scenes, paper for reading scenes), one accent.
   The accent is ultramarine and is used ONLY in transitions (wipes, tiles, route covers)
   and in the active state (current nav item, pressed toggle, focus ring, the filled 1590 bubble).
   Never as a flood, a background of a reading block, or decoration. */

/* Akt, self-hosted (v16 core): the Google Fonts woff2 files (variable, wght 100-900, OFL), same family
   name and unicode-ranges as fonts.googleapis.com served them. U+02BB (oʻ/gʻ) is in the latin file. */
@font-face {
  font-family: 'Akt';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/akt-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Akt';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/akt-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Akt';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/akt-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* grounds */
  --ink: #14151A;
  --ink-2: #1E2027;          /* raised surface on ink (cards, modal chrome) */
  --paper: #FFFFFF;
  --paper-2: #E4E5E3;        /* quiet surface on paper (rules, placeholders) */

  /* text on each ground */
  --on-ink: #FFFFFF;
  --on-ink-mute: rgba(255, 255, 255, .62);
  --on-paper: #14151A;
  --on-paper-mute: #4E5058;
  --line-ink: rgba(255, 255, 255, .16);
  --line-paper: rgba(20, 21, 26, .18);

  /* the one accent: transitions + active state only */
  --accent: #2438F0;
  --on-accent: #FFFFFF;

  /* type. --f-display is filled by the typographer (one open-licence family that renders oʻ/gʻ,
     U+02BB, correctly). Until then it falls back to a system grotesque. Add the Google Fonts
     <link> in index.html, then set the family name first in the stack here. */
  --f-display: "Akt", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Akt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-display: 700;
  --fw-body: 400;

  /* type scale (fluid). Display sizes follow the bar in SYNTHESIS.md §1: 150px+ at 1440 wide. */
  --t-hero: clamp(4.5rem, 18vw, 21rem);     /* the name, 16-20vw */
  --t-giant: clamp(3.5rem, 12vw, 14rem);    /* odometers, year numerals */
  --t-d1: clamp(2.75rem, 7vw, 8rem);
  --t-d2: clamp(2rem, 4.2vw, 4.75rem);
  --t-lead: clamp(1.25rem, 1.6vw, 1.625rem);
  --t-body: clamp(1rem, 1.1vw, 1.125rem);
  --t-small: .875rem;
  --t-micro: .75rem;
  --lh-display: .9;
  --lh-body: 1.5;
  --track-display: -.02em;

  /* space */
  --gut: clamp(16px, 2.2vw, 32px);           /* page side gutter; 16px at phone width */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem;
  --max-read: 38rem;                          /* reading measure */

  /* shape: the SAT answer bubble is the window shape everywhere */
  --bubble: 50% / 50%;
  --radius-s: 4px;

  /* motion. "osmo" is also registered in GSAP as ease: "osmo" (CustomEase, same curve). */
  --ease-osmo: cubic-bezier(.625, .05, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-fast: .35s;
  --d-base: .8s;
  --d-slow: 1.2s;

  /* layers */
  --z-gl: 0;          /* the one fixed WebGL canvas, behind everything */
  --z-content: 1;     /* main + route views */
  --z-nav: 50;
  --z-modal: 80;
  --z-intro: 100;
  --z-cover: 120;     /* route-transition cover */
}