/*
 * LegendInSpire brand tokens
 *
 * Only approved decisions from docs/brand/brand-guidelines.md belong here.
 * Values and roles are defined in docs/brand/brand-guidelines.md.
 */

@import url("fonts.css");

:root {
  --brand-ember-black: #0c0705;
  --brand-deep-umber: #3a2211;
  --brand-forge-gold: #d8a34a;
  --brand-parchment: #f7e2a8;
  --brand-inner-circle-blue: #3b6ea5;

  --state-success: #83c092;
  --state-warning: #f0b95b;
  --state-error: #e47a6e;
  --state-information: #e8c98b;
  --state-focus: #ffd166;

  --color-canvas: var(--brand-ember-black);
  --color-surface: var(--brand-deep-umber);
  --color-text: var(--brand-parchment);
  --color-accent: var(--brand-forge-gold);
  --color-border: var(--brand-forge-gold);
  --color-link: var(--brand-parchment);

  --font-display: "Metamorphous", Georgia, serif;
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;

  --type-display: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);
  --type-page-title: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --type-section-heading: clamp(2rem, 1.55rem + 1.8vw, 3rem);
  --type-subsection-heading: clamp(1.5rem, 1.28rem + 0.9vw, 2rem);
  --type-body-lead: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --type-body: clamp(1.0625rem, 1.035rem + 0.11vw, 1.1875rem);
  --type-small-label: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
  --type-caption: clamp(0.8125rem, 0.785rem + 0.11vw, 0.875rem);

  --line-height-display: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.65;
  --measure-reading: 68ch;

  --space-micro: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --layout-container: 75rem;
  --layout-gutter: clamp(1rem, 0.55rem + 2vw, 2rem);
  --layout-section-spacing: clamp(3rem, 1.5rem + 6vw, 8rem);
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;

  --surface-stage: color-mix(in srgb, var(--brand-ember-black) 88%, var(--brand-deep-umber));
  --surface-narrative: color-mix(in srgb, var(--brand-deep-umber) 72%, var(--brand-ember-black));
  --border-subtle: color-mix(in srgb, var(--brand-forge-gold) 38%, transparent);
  --border-emphasis: var(--brand-forge-gold);
  --glow-warm: 0 0 2rem color-mix(in srgb, var(--brand-forge-gold) 22%, transparent);

  --radius-panel: 0.75rem;
  --radius-stage: 0.875rem;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-artifact: 3px double;
  --control-min-size: 2.75rem;
  --focus-ring: 0 0 0 0.1875rem var(--state-focus);

  --duration-control: 150ms;
  --duration-panel: 220ms;
  --duration-reveal: 320ms;
  --distance-reveal: 0.25rem;
  --ease-illuminate: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-control: 0ms;
    --duration-panel: 0ms;
    --duration-reveal: 0ms;
    --distance-reveal: 0;
  }
}