/* Hallmark · tokens · genre: editorial · theme: custom-lite (Reisejournal) */
:root {
  /* paper & ink — warm oat anchor, hue 70 */
  --color-paper:    oklch(95.5% 0.014 75);
  --color-paper-2:  oklch(91.5% 0.018 75);
  --color-paper-3:  oklch(87% 0.020 72);
  --color-rule:     oklch(78% 0.016 70);
  --color-neutral:  oklch(55% 0.014 60);
  --color-muted:    oklch(40% 0.012 55);
  --color-ink:      oklch(19% 0.014 50);
  --color-ink-2:    oklch(26% 0.016 50);
  --color-accent:   oklch(58% 0.19 33);   /* vermilion, < 3 % of any view */
  --color-focus:    oklch(55% 0.19 33);
  --color-hatch:    oklch(83% 0.018 72);
  --color-veil:     oklch(14% 0.014 50 / 0.88);  /* overlay modifier on photos */
  --color-tape:     oklch(92% 0.035 85 / 0.78);  /* masking-tape modifier */
  /* kraft board — the surface everything is glued onto */
  --color-kraft:      oklch(74% 0.058 68);
  --color-kraft-edge: oklch(58% 0.065 60 / 0.55);   /* vignette modifier */
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --paper-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");

  /* scrapbook chips — magazine cut-outs, used only in the collage */
  --chip-mustard:   oklch(82% 0.14 85);
  --chip-teal:      oklch(52% 0.09 195);
  --chip-pink:      oklch(83% 0.08 15);
  --chip-sky:       oklch(86% 0.05 230);
  --chip-lavender:  oklch(84% 0.07 305);
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C22 70 2 52 2 29 2 13 14 2 28 2c10 0 18 5 22 13C54 7 62 2 72 2c14 0 26 11 26 27 0 23-20 41-48 61z'/%3E%3C/svg%3E");
  --color-print:    oklch(98% 0.008 80);          /* photo-print border */
  --color-shadow:   oklch(22% 0.02 50 / 0.55);   /* shadow modifier */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
  --font-cap:     "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;  /* photo captions */
  --font-hand:    "Caveat", "Bradley Hand", cursive;                            /* handwriting on tape */

  /* scale — perfect fourth, fluid for projectors */
  --text-xs:   clamp(0.72rem, 0.65vw, 0.9rem);
  --text-sm:   clamp(0.85rem, 0.85vw, 1.1rem);
  --text-md:   clamp(1rem, 1.15vw, 1.45rem);
  --text-lg:   clamp(1.3rem, 1.75vw, 2.2rem);
  --text-xl:   clamp(1.7rem, 2.6vw, 3.3rem);
  --text-2xl:  clamp(2.2rem, 4vw, 5rem);
  --text-display-s: clamp(2.6rem, 6.2vw, 7.5rem);
  --text-display:   clamp(3.2rem, 9vw, 11rem);

  /* space — 4 pt */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --gutter: clamp(16px, 2.4vw, 48px);

  --rule-hair: 1px;
  --rule-bold: 3px;
  --radius-none: 0;

  /* motion */
  --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-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
}