/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · macrostructure: Contact Sheet & Studio Workbench · tone: Warm Archival & Precision Studio · anchor hue: tungsten-amber oklch(0.53 0.16 42)
 * Ray-Media: ontwerptokens ("Het Contactblad & de Studio-lichtbak").
 *
 * Zie docs/ray-media-mockup.md en site/raymedia/DESIGN.md.
 * Regelnummers verwijzen naar Shipshape (https://shipshape.toao.nl/).
 *
 * Zelfgehoste lettertypes (SIL Open Font License 1.1):
 *   Anek Latin (Ek Type): woordmerk, koppen (breed) en obi-beeldstroken (smal).
 *   Archivo (Omnibus-Type): lopende tekst, formulieren, knoppen en tabelcijfers.
 */

@font-face {
  font-family: "Anek Latin";
  src: url("../fonts/anek-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Ondergrond: warm bariet-fotopapier in licht, donkere kamer in donker (CK-KLR-05, CK-KLR-54). */
  --papier: light-dark(#f5f2ec, #0e1014);
  --vlak: light-dark(#ffffff, #161920);
  --vlak-2: light-dark(#ebe6dc, #1e222b);
  --vlak-3: light-dark(#dcd5c7, #282d38);
  --lichtbak: light-dark(#14171d, #090b0e);
  --lichtbak-2: light-dark(#20252e, #141820);
  --lichtbak-tekst: #f3f1ec;
  --lichtbak-gedempt: rgb(243 241 236 / 0.72);

  /* Zilvergelatine-inkt en dekkingsstappen (CK-KLR-12, contrast >= 4.5:1). */
  --inkt: light-dark(#15171c, #f1efe9);
  --inkt-2: light-dark(rgb(21 23 28 / 0.74), rgb(241 239 233 / 0.75));
  --inkt-3: light-dark(rgb(21 23 28 / 0.56), rgb(241 239 233 / 0.58));
  --inkt-60: light-dark(#5f6268, #9c9ea3);
  --inkt-30: light-dark(#c5c1b8, #444954);
  --inkt-10: light-dark(#eae6de, #242832);

  /* Haarlijnen en veldranden (CK-KLR-22). */
  --lijn: light-dark(rgb(21 23 28 / 0.13), rgb(241 239 233 / 0.14));
  --lijn-sterk: light-dark(rgb(21 23 28 / 0.29), rgb(241 239 233 / 0.32));

  /* Hoofdactie & lichtbak-markering: warm wolfraam-amber (#b84309 op wit = 5.35:1). */
  --amber: light-dark(#b84309, #f48c4e);
  --amber-hover: light-dark(#963505, #ffab76);
  --amber-zacht: light-dark(#f9e5d8, #381e11);

  /* Verstild register voor Uitvaart & Besloten Livestream (#234957 op wit = 9.4:1). */
  --leisteen: light-dark(#234957, #72bcd4);
  --leisteen-hover: light-dark(#193742, #93d0e4);
  --leisteen-zacht: light-dark(#dfe9ed, #152b33);

  /* Goud-oker voor ceremoniële accenten & lichtbak-sterren (#735004 op wit = 7.1:1). */
  --goud: light-dark(#735004, #efc258);
  --goud-zacht: light-dark(#f6ebd0, #34280e);

  /* Semantische statuskleuren: rood uitsluitend voor fouten/urgentie (CK-KLR-01, CK-KLR-10). */
  --rood: light-dark(#b82916, #ff7e6b);
  --rood-hover: light-dark(#941e0e, #ff9e8f);
  --rood-zacht: light-dark(#fbe2dd, #3c1a15);
  --groen: light-dark(#1a6640, #5ed196);
  --groen-zacht: light-dark(#dcf0e4, #133324);

  --op-kleur: light-dark(#ffffff, #0e1014);
  --steun: var(--amber);
  --steun-hover: var(--amber-hover);
  --steun-zacht: var(--amber-zacht);
  --focus: var(--amber);
  --scrim: rgb(12 14 18 / 0.62);

  /* Grafiek- en tijdlijnreeksen in OKLCH (CK-DSH-22). */
  --reeks-1: light-dark(oklch(0.52 0.16 42), oklch(0.74 0.15 48));
  --reeks-2: light-dark(oklch(0.46 0.08 220), oklch(0.73 0.09 220));
  --reeks-3: light-dark(oklch(0.56 0.12 82), oklch(0.78 0.13 82));
  --reeks-vorig: light-dark(rgb(21 23 28 / 0.32), rgb(241 239 233 / 0.34));

  /* Typografie: twee families met duidelijke rolverdeling (CK-TYP-05, CK-TYP-06). */
  --f-display: "Anek Latin", "Archivo", system-ui, -apple-system, sans-serif;
  --f-tekst: "Archivo", system-ui, -apple-system, sans-serif;

  /* Vloeiende schaal voor Publiek (Persuade & Experience; CK-TYP-10, CK-TYP-25). */
  --t-reus: clamp(2.15rem, 1.35rem + 3.6vw, 4.25rem);
  --t-kop-2: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem);
  --t-kop-3: clamp(1.18rem, 1.04rem + 0.5vw, 1.42rem);
  --t-lees: 1.0625rem;

  /* Vaste bedienschaal voor Klantportaal en Studio-backoffice (Operate; CK-TYP-03, CK-TYP-09). */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-24: 1.5rem;

  /* 4-punts ruimteschaal (CK-LAY-08). */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 24px;
  --r-8: 32px;
  --r-10: 40px;
  --r-12: 48px;
  --r-16: 64px;
  --r-24: 96px;

  --rand: clamp(16px, 4vw, 48px);
  --breed: 84rem;
  --breed-smal: 58rem;
  --hoek-plaat: 2px;
  --hoek-paneel: 4px;
  --hoek: 6px;
  --demo-h: 40px;

  /* Zwevende lagen krijgen --schaduw-pop; vlakken op papier krijgen 1px rand (CK-KLR-25). */
  --schaduw-pop: 0 4px 12px rgb(15 17 22 / 0.12), 0 20px 48px -12px rgb(15 17 22 / 0.34);

  /* Beweging: exponentieel uit (CK-MOT-05). */
  --zacht: cubic-bezier(0.16, 1, 0.3, 1);
  --snel: 160ms;
  --midden: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --schaduw-pop: 0 0 0 1px rgb(241 239 233 / 0.12), 0 20px 48px -12px rgb(0 0 0 / 0.75);
  }
}
:root[data-thema="donker"] {
  color-scheme: dark;
  --schaduw-pop: 0 0 0 1px rgb(241 239 233 / 0.12), 0 20px 48px -12px rgb(0 0 0 / 0.75);
}
:root[data-thema="licht"] {
  color-scheme: light;
}

/* Verstild register voor Uitvaart & Besloten Livestream */
[data-register="uitvaart"] {
  --steun: var(--leisteen);
  --steun-hover: var(--leisteen-hover);
  --steun-zacht: var(--leisteen-zacht);
  --focus: var(--leisteen);
}