/* Tokens: the door world (room, green lacquer, gold) + the site (black, beige, maroon, turquoise) */
:root {
  /* site: black, beige, maroon, turquoise */
  --color-beige:       oklch(92.2% 0.026 80);
  --color-beige-2:     oklch(88.6% 0.032 78);
  --color-paper:       var(--color-beige);
  --color-paper-2:     var(--color-beige-2);
  --color-paper-muted: oklch(92.2% 0.026 80 / 0.62);
  --color-paper-rule:  oklch(92.2% 0.026 80 / 0.22);
  --color-ink:         oklch(16% 0.006 50);
  --color-ink-2:       oklch(38% 0.02 40);
  --color-ink-3:       oklch(56% 0.022 50);
  --color-rule:        oklch(16% 0.006 50 / 0.16);
  --color-maroon:      oklch(34% 0.105 18);
  --color-turquoise:   oklch(74% 0.11 188);
  --color-turquoise-deep: oklch(50% 0.085 195);

  /* the door world keeps its own lamplight */
  --color-lamp:        oklch(95.6% 0.011 82);
  --color-lamp-muted:  oklch(95.6% 0.011 82 / 0.56);
  --color-aura:        oklch(82% 0.1 85 / 0.24);

  /* brass */
  --color-brass:    oklch(71% 0.095 78);
  --color-brass-hi: oklch(88% 0.07 90);
  --color-brass-lo: oklch(47% 0.075 65);
  --color-glow:     oklch(88% 0.07 88 / 0.7);

  /* the room + the door */
  --color-room:      oklch(16.5% 0.008 60);
  --color-room-2:    oklch(20.5% 0.01 60);
  --color-room-rule: oklch(95.6% 0.011 82 / 0.12);
  --color-door:      oklch(31% 0.042 165);
  --color-door-hi:   oklch(38% 0.045 165);
  --color-door-lo:   oklch(23% 0.035 165);
  --color-shadow:    oklch(10% 0.01 60 / 0.55);
  --color-light-1:   oklch(95.6% 0.011 82 / 0.2);
  --color-light-2:   oklch(95.6% 0.011 82 / 0.1);

  --color-focus: var(--color-turquoise-deep);

  /* type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.25rem + 2.3vw, 3.25rem);
  --text-3xl: clamp(3rem, 1.6rem + 6.2vw, 8rem);
  --text-display: clamp(3.25rem, 28vw, 34rem);

  /* space (4pt) */
  --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: clamp(6rem, 4rem + 8vw, 11rem);
  --gutter: clamp(1rem, 3.2vw, 3rem);

  /* 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-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  --rule-hair: 1px;
  --radius-pill: 999px;
}