/* Hallmark · route: custom (tuned) · vibe: "ivoor, kaarslicht, goud, hoge contrastserif"
 * paper: oklch(97.2% 0.008 85) · accent: oklch(61.3% 0.115 69) het goud van de fotowand
 * display: Cormorant Garamond (roman, licht) · body: Jost
 * axes: light / classical-serif / warm
 *
 * Twee regels die de hele pagina dragen:
 *   1. De knop is inkt, niet kleur. Zwart op ivoor leest duurder dan elk accent.
 *   2. Goud komt nooit als vlak voor, alleen als lijn, tape, stip of klein woord.
 */

:root {
  /* ---------- Type ----------
     Cormorant Garamond heeft een lage x-hoogte en hoog contrast: hij mag
     groot en licht staan. Jost is geometrisch en heeft juist lucht nodig,
     vandaar de ruime regelafstand en de lichte letterspatiëring hieronder. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Papier ----------
     Letterlijk overgenomen uit de stylesheet van de echte fotowand, zodat de
     site en het product exact dezelfde kleuren voeren. Bronhex staat erachter. */
  --color-paper:      oklch(95.7% 0.018 81);   /* #F7F0E4  ivory-soft, de pagina */
  --color-paper-2:    oklch(98.6% 0.009 85);   /* #FDFAF4  ivory, polaroids en velden */
  --color-paper-3:    oklch(92.2% 0.029 83);   /* #EFE4D0  cream, rustige banden */
  --color-wash:       oklch(87.7% 0.034 82);   /* #E2D5BE  hairline, alleen grafisch */

  /* ---------- Inkt ----------
     Het merkbruin van de wand is #4A3422. Voor lopende tekst gaat er een stap
     dieper overheen, dan haalt de pagina 13,5:1 in plaats van 10,3:1. */
  --color-ink:        oklch(26.8% 0.040 68);
  --color-ink-hover:  oklch(34.6% 0.043 60);   /* #4A3422 */
  --color-ink-2:      oklch(34.6% 0.043 60);   /* #4A3422 */
  --color-muted:      oklch(48.1% 0.047 74);   /* 5,8:1 op papier, 5,2:1 op cream */
  --color-on-ink:     oklch(98.6% 0.009 85);

  /* ---------- Lijnen ---------- */
  --color-rule:       oklch(87.7% 0.034 82);   /* #E2D5BE */
  --color-rule-2:     oklch(92.2% 0.029 83);   /* #EFE4D0 */
  --color-rule-heavy: oklch(26.8% 0.040 68);

  /* ---------- Accent: het goud van de fotowand ---------- */
  --color-accent:      oklch(61.3% 0.115 69);  /* #B0762A  alleen grafisch (3,4:1) */
  --color-accent-soft: oklch(76.3% 0.106 79);  /* #D6AA60  gold-light, de tape */
  --color-accent-text: oklch(48.6% 0.097 67);  /* 5,8:1 op papier, 5,2:1 op cream */

  /* Doorschijnend, voor de polaroids: zelfde verhoudingen als in de kaart zelf. */
  --color-frame:      oklch(61.3% 0.115 69 / 0.5);
  --color-tape:       oklch(76.3% 0.106 79 / 0.5);
  --color-tape-edge:  oklch(48.6% 0.097 67 / 0.25);
  --color-photo-edge: oklch(61.3% 0.115 69 / 0.3);

  /* ---------- Status ---------- */
  --color-ok:      oklch(41% 0.080 155);
  --color-ok-bg:   oklch(95% 0.026 155);
  --color-err:     oklch(44% 0.140 27);
  --color-err-bg:  oklch(95.5% 0.028 27);

  /* Focusring staat 3px buiten het element, dus altijd op het papier. */
  --color-focus:   oklch(46.1% 0.130 66);

  --color-print:   oklch(100% 0 0);            /* alleen voor print */

  /* ---------- Ruimte, 4pt ----------
     Ruimer dan gebruikelijk: witruimte is hier het duurste materiaal. */
  --space-3xs: 4px;   --space-2xs: 8px;   --space-xs: 12px;
  --space-sm: 16px;   --space-md: 24px;   --space-lg: 40px;
  --space-xl: 64px;   --space-2xl: 96px;  --space-3xl: 136px;
  --space-4xl: 184px;

  --page-gutter: clamp(22px, 5.5vw, 76px);
  --measure: 60ch;
  --max-w: 1240px;

  /* ---------- Typeschaal ---------- */
  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.5rem;
  --text-2xl:   clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --text-3xl:   clamp(2.5rem, 1.3rem + 4.2vw, 4.25rem);
  --text-display-s: clamp(2.75rem, 1.2rem + 5.6vw, 5.25rem);
  --text-display:   clamp(3.4rem, 0.4rem + 12.4vw, 11rem);

  /* Micro-label: Jost, wijd gespatieerd, klein. */
  --track-label: 0.2em;
  --track-body: 0.005em;

  /* ---------- Vorm ---------- */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius-sm: 2px;
  --radius: 3px;                 /* bijna vierkant: ronde hoeken lezen goedkoop */
  --shadow-note: 0 2px 4px oklch(34.6% 0.043 60 / 0.10), 0 14px 30px oklch(34.6% 0.043 60 / 0.18);
  --shadow-lift: 0 2px 4px oklch(34.6% 0.043 60 / 0.12), 0 16px 40px oklch(34.6% 0.043 60 / 0.20);

  /* Glas · alleen voor het mobiele menu, dat over de pagina heen komt te liggen.
     Ivoor in plaats van wit, anders zweeft er een koud vlak boven een warme
     pagina. De hoek blijft bijna vierkant: zie --radius hierboven. */
  --glass-bg:     oklch(98.6% 0.009 85 / 0.86);
  --glass-rule:   oklch(87.7% 0.034 82 / 0.90);
  --glass-blur:   blur(16px);
  --shadow-glass: 0 2px 6px oklch(34.6% 0.043 60 / 0.10), 0 18px 44px oklch(34.6% 0.043 60 / 0.22);
  --scrim:        oklch(26.8% 0.040 68 / 0.34);

  /* ---------- Beweging ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur: 240ms;
  --dur-slow: 700ms;

  /* ---------- Lagen ---------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 30; --z-top: 40;
}