/* Tokens: één bron van waarheid voor de hele atlas.
   Kleur, type, ruimte en timing. Wijzig hier, niet in de scenes. */

:root {
  /* ---- Oxbloed marokijn: de band waarin de atlas gebonden is ---- */
  --leather-950: #12040A;
  --leather-900: #1D060D;
  --leather-800: #2B0910;
  --leather-700: #3B0D18;
  --leather-600: #4E1020;
  --leather-500: #66152A;

  /* ---- Pigment: handgekleurde wassing op de plaat ---- */
  --carmine: #A81E3C;
  --carmine-deep: #7A1329;
  --vermilion: #D4522F;
  /* Aparte, lichtere inkt voor foutmeldingen: vermiljoen doet elders
     pigmentwerk, maar haalt op oxbloed net geen 4,5:1, en dit is precies de
     regel die ze leest als ze vastzit. */
  --error-ink: #EE7C58;
  --rose-ink: #D4879A; /* getint uit de grondtoon, nooit grijs */

  /* ---- Bladgoud. Stempelgoud is nooit één vlakke kleur. ---- */
  --gold-dark: #6E4C18;
  --gold-mid: #C6A052;
  --gold-warm: #E0BE73;
  --gold-bright: #F5E3AE;
  --gold-spec: #FFF8E2;

  /* ---- Been en ivoor: de gegraveerde lijn op donkere grond ---- */
  --bone: #F0E6D6;
  --bone-2: #D8CBB6;
  --bone-3: #A99C87;

  /* ---- Plaatgronden. Elke plaat zijn eigen inkt. ---- */
  --ground-indigo: #0A0917;
  --ground-terminal: #05080A;
  --ground-steel: #171C23;
  --ground-walnut: #21120A;
  --ground-prussian: #051E38;

  /* ---- Type ---- */
  --face-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --face-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-script: "Pinyon Script", "Snell Roundhand", cursive;
  --face-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(4rem, 20vw, 7rem);
  --fs-numeral: clamp(4.5rem, 26vw, 9rem);
  --fs-title: clamp(1.5rem, 7vw, 2.25rem);
  --fs-lead: clamp(1.0625rem, 4.4vw, 1.1875rem);
  --fs-body: 1.0625rem; /* 17px, onder 16px zoomt iOS Safari het invoerveld in */
  --fs-caption: 0.8125rem;
  --fs-label: 0.6875rem;

  /* De enige afgeronde rechthoek in het systeem. De gleuf is het enige vlak dat
     ze echt aanraakt, en scherpe hoeken voelden daar hard. Alles wat ze niet
     aanraakt blijft rechthoekig. */
  --radius-slot: 7px;

  --lh-body: 1.68;
  --lh-title: 1.12;
  --ls-label: 0.22em;
  --measure: 36rem; /* leesmaat */

  /* ---- Ruimte, 4px-basis ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ---- Timing. Alle zes werelden ademen in hetzelfde tempo. ---- */
  --dur-1: 220ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
  --dur-4: 1200ms;
  --dur-5: 2000ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drop: cubic-bezier(0.5, 0, 0.9, 0.4); /* versnelt, zoals zwaartekracht */
  /* De beugel: een veer duwt hem open en hij slaat tegen zijn eindaanslag. Dus
     heel snel weg en dan hard stoppen: geen terugveer. Dat leest als metaal;
     een bounce leest als speelgoed. */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Materiaal ---- */
  --grad-gold: linear-gradient(
    152deg,
    var(--gold-dark) 0%,
    var(--gold-mid) 26%,
    var(--gold-spec) 47%,
    var(--gold-warm) 58%,
    var(--gold-dark) 100%
  );
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E");

  /* Schaduw draagt altijd een offset én een blur, een gekleurde halo zonder
     offset is decoratie, geen diepte. */
  --shadow-lift: 0 18px 40px -12px rgba(0, 0, 0, 0.72), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
  --shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(224, 190, 115, 0.14);
}