/* ==========================================================================
   Inkeeper design tokens
   Palette taken from the "The Inkeeper" banner: night-sky charcoal, sage
   lettering, copper ornaments and worn parchment.
   Components reference these variables only; no raw hex values elsewhere.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Ground (the banner's starry charcoal) ---- */
  --color-bg: #161613;          /* page and stage background */
  --color-bg-deep: #0D0D0B;     /* shadows, vignette, lightbox */
  --color-surface: #1F1F1B;     /* cards, inputs */
  --color-surface-raised: #272722;

  /* ---- Lettering (the banner's sage wordmark) ---- */
  --color-text: #C9D0BA;        /* headings and body: 11.6:1 on bg */
  --color-text-bright: #DDE3D0; /* display type, hover */
  --color-text-muted: #8F9483;  /* captions, meta: 5.6:1 on bg */
  --color-text-faint: #5F6357;  /* decorative numerals only, not for reading */

  /* ---- Copper (the banner's ornaments, frame rules and sunburst) ---- */
  --color-copper: #B8702B;      /* rules, ornaments, focus, active nav: 4.7:1 on bg */
  --color-copper-bright: #D98E3F; /* hover, the status dot */
  --color-copper-deep: #6E4A28; /* hairlines, card borders */

  /* ---- Parchment (the banner's torn manuscript) ---- */
  --color-parchment: #C2B497;   /* intro sheet, primary button */
  --color-parchment-dark: #8C7C5E;
  --color-ink: #1C1A15;         /* type printed on parchment: 9.4:1 */

  --color-danger: #E7A58C;      /* error text: 7.6:1 on surface */

  /* ---- Intro fire (js/intro.js burns the parchment away) ---- */
  --color-ember-hot: #FFD99A;
  --color-ember: #D9701E;
  --color-char: #1A1008;

  /* ---- Background stage (js/stage.js), RGB hex only ---- */
  --stage-ink: #141411;
  --stage-smoke: #4A4B40;
  --stage-glow: #B8702B;
  --stage-star: #DDE3D0;

  /* ---- Derived mixes ---- */
  --color-line: rgb(201 208 186 / 0.16);
  --color-line-strong: rgb(201 208 186 / 0.32);
  --color-overlay: rgb(13 13 11 / 0.94);
  --color-header: rgb(22 22 19 / 0.8);
  --color-vignette: rgb(26 20 12 / 0.55);
  --color-sheen: rgb(255 246 222 / 0.22);
  --color-copper-glow: rgb(184 112 43 / 0.35);

  /* ---- Typography ---- */
  --font-display: "Revolver Blackletter", "Old English Text MT", Georgia, serif;
  --font-body: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-caps: "Cinzel", "Trajan Pro", Georgia, serif;

  --fs-xs: 0.6875rem;   /* caps labels */
  --fs-sm: 0.875rem;
  --fs-base: 1.125rem;
  --fs-md: 1.25rem;
  --fs-lead: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  --fs-h2: clamp(4.25rem, 2.5rem + 8vw, 10.5rem);
  --fs-hero: min(34vw, 24rem); /* Revolver is wide: "The Inkeeper" runs ~2.6em */

  --lh-tight: 0.9;
  --lh-heading: 1.05;
  --lh-body: 1.6;
  --measure: 60ch;
  --tracking-caps: 0.18em;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-section: clamp(5rem, 3rem + 7vw, 10rem);
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --max-width: 90rem;
  --header-height: 4.25rem;

  /* ---- Shape & depth ---- */
  --radius-pill: 999px;
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.55);
  --focus-ring: 2px solid var(--color-copper-bright);
  --focus-offset: 3px;

  /* ---- Interaction ---- */
  --tap-min: 44px;
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Breakpoints (min-width, mobile-first). CSS variables can't be used inside
   media queries, so these are the agreed values used across the stylesheets:
   sm 40em (640px) · md 48em (768px) · lg 64em (1024px) · xl 90em (1440px) */