/* Design tokens: see DESIGN.md. Every colour, font and timing used on the site comes from here. */
:root {
  /* colour */
  --c-cream: #EDE7DE;
  --c-cream-light: #F3EEE6;
  --c-black: #0A0604;
  --c-black-2: #16100C;
  --c-black-3: #221913;
  --c-orange: #E08010;
  --c-orange-hover: #C96F08;
  --c-brown: #784000;
  --c-ink: rgba(10, 6, 4, .80);
  --c-ink-soft: rgba(10, 6, 4, .56);
  --c-on-dark: #F3EEE6;
  --c-on-dark-soft: rgba(243, 238, 230, .62);
  --c-line: rgba(120, 64, 0, .35);
  --c-line-dark: rgba(243, 238, 230, .14);
  --c-error: #A3320B;
  --c-surface: #3A2A22;       /* table surface in the template mockups */

  /* wave gradient stops (cover) */
  --w-1: #FFF6C2;
  --w-2: #F6D24A;
  --w-3: #E9A21C;
  --w-4: #C46A12;
  --w-5: #6E3208;

  /* type */
  --f-display: "Noto Serif Display", "Times New Roman", serif;
  --f-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-sub: clamp(1.15rem, 1rem + .6vw, 1.6rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .72rem;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --gutter: max(16px, env(safe-area-inset-left));
  --vh: 1vh;  /* small viewport (browser toolbars shown) where supported, vh otherwise */
  --lvh: 1vh; /* large viewport (toolbars hidden); iOS vh already behaves like this */

  /* shape and depth */
  --radius: 2px;
  --hair: 1px;
  --shadow-book: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 12px 24px -12px rgba(0, 0, 0, .45);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;
}

@supports (height: 1svh) {
  :root { --vh: 1svh; --lvh: 1lvh; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 120ms; --t-slow: 160ms; }
}