/* Hallmark · tokens — Pozornica
 * theme: custom · vibe: "night stage, warm spotlight, couture restraint"
 * paper oklch(13% 0.010 60) · accent oklch(83% 0.10 82) gold · display Newsreader (roman) + body Switzer
 * axes: dark / high-contrast-serif / warm
 */
:root {
  /* colour */
  --color-paper:        oklch(13% 0.010 60);
  --color-paper-2:      oklch(16.5% 0.012 58);
  --color-paper-3:      oklch(20.5% 0.014 56);
  --color-rule:         oklch(28% 0.012 62);
  --color-rule-strong:  oklch(40% 0.014 66);
  --color-muted:        oklch(72% 0.016 78);
  --color-ink:          oklch(95% 0.012 85);
  --color-accent:       oklch(83% 0.100 82);
  --color-accent-deep:  oklch(64% 0.095 72);
  --color-accent-ink:   oklch(17% 0.020 70);
  --color-focus:        oklch(83% 0.100 82);
  --color-light:        oklch(97% 0.050 85);
  --color-scene-1:      oklch(19% 0.020 70);
  --color-scene-2:      oklch(17% 0.030 260);
  --color-scene-3:      oklch(17% 0.050 350);
  --color-scene-4:      oklch(18.5% 0.050 22);
  --color-scene-5:      oklch(19% 0.040 82);
  --color-vyan-paper:   oklch(21% 0.050 38);
  --color-vyan-accent:  oklch(72% 0.130 50);
  --color-vyan-ink:     oklch(88% 0.030 60);
  --color-vyan-rule:    oklch(38% 0.070 44);

  /* type */
  --font-display: "Newsreader", "Bodoni Moda", Georgia, serif; /* Bodoni stays as fallback for the old prototypes, which load it themselves */
  --font-body:    "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-outlier: "Archivo", "Arial Black", sans-serif;

  --text-2xs: 0.6875rem;   /* 11px — caps labels only */
  --text-xs:  0.8125rem;   /* 13px */
  --text-sm:  0.9375rem;   /* 15px */
  --text-base: 1rem;       /* 16px */
  --text-md:  1.25rem;     /* 20px */
  --text-lg:  1.5625rem;   /* 25px */
  --text-xl:  clamp(1.75rem, 1.6vw + 1.1rem, 2.4rem);
  --text-statement: clamp(1.75rem, 2.6vw + 0.75rem, 3.25rem);
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);

  /* space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --section:   clamp(4rem, 7vw + 1rem, 6.5rem);
  --gutter:    clamp(1rem, 4vw, 3.5rem);
  --container: 85rem;

  /* 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;

  /* depth */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;

  --radius-none: 0;
  color-scheme: dark;
}

/* Light theme (switch in the nav). The opening photograph and the nav above it stay on the night stage. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-paper:        oklch(96.5% 0.010 85);
  --color-paper-2:      oklch(93.5% 0.012 83);
  --color-paper-3:      oklch(90% 0.014 80);
  --color-rule:         oklch(86% 0.010 80);
  --color-rule-strong:  oklch(66% 0.014 70);
  --color-muted:        oklch(45% 0.014 60);
  --color-ink:          oklch(19% 0.014 50);
  --color-accent:       oklch(52% 0.105 72);
  --color-accent-deep:  oklch(44% 0.095 68);
  --color-accent-ink:   oklch(97% 0.010 85);
  --color-focus:        oklch(52% 0.105 72);
}
:root[data-theme="light"] .stage-dark {
  color-scheme: dark;
  color: var(--color-ink);
  --color-paper:        oklch(13% 0.010 60);
  --color-paper-2:      oklch(16.5% 0.012 58);
  --color-paper-3:      oklch(20.5% 0.014 56);
  --color-rule:         oklch(28% 0.012 62);
  --color-rule-strong:  oklch(40% 0.014 66);
  --color-muted:        oklch(72% 0.016 78);
  --color-ink:          oklch(95% 0.012 85);
  --color-accent:       oklch(83% 0.100 82);
  --color-accent-deep:  oklch(64% 0.095 72);
  --color-accent-ink:   oklch(17% 0.020 70);
  --color-focus:        oklch(83% 0.100 82);
}