/* ==========================================================================
   Indigo & Asphalt — Design Tokens
   Single source of truth for color and typography. Components reference
   these variables; don't hardcode brand values anywhere else.
   ========================================================================== */

:root {
  /* ---- Color: the indigo / asphalt tension -------------------------- */
  --color-indigo: #483984;       /* craft, heritage, slow making */
  --color-asphalt: #37343a;      /* skate, counterculture, street */
  --color-aged-linen: #F2EDE4;   /* warm neutral ground */
  --color-selvedge: #B8A898;     /* muted secondary, borders, rules */
  --color-light-indigo: #8B7EC8; /* indigo, lifted — accents, links */

  /* Semantic aliases — reference these in components, not raw colors */
  --color-bg: var(--color-aged-linen);
  --color-bg-inverse: var(--color-asphalt);
  --color-text: var(--color-asphalt);
  --color-text-inverse: var(--color-aged-linen);
  --color-text-muted: #6f6671;
  --color-accent: var(--color-indigo);
  --color-accent-soft: var(--color-light-indigo);
  --color-border: var(--color-selvedge);

  /* ---- Typography ----------------------------------------------------
     Display: Cormorant Garamond — headlines.
     Body: DM Sans — everything you read.
     Accent: DM Sans, uppercase, wide tracking — section labels, eyebrows,
     pillar badges. Not a separate typeface, a separate treatment.
  ------------------------------------------------------------------------ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-accent: 'DM Sans', -apple-system, sans-serif;

  --tracking-accent: 0.12em;

  /* Type scale */
  --text-display-lg: 3.4rem;   /* hero headline */
  --text-display-md: 2.25rem;  /* section headline */
  --text-display-sm: 1.5rem;   /* card / subsection headline */
  --text-body: 1.05rem;
  --text-body-sm: 0.92rem;
  --text-accent: 0.78rem;      /* small caps labels */

  --leading-display: 1.1;
  --leading-body: 1.6;

  /* ---- Spacing & shape -------------------------------------------------
     Kept modest and consistent — the brand is restrained, not decorative.
  ------------------------------------------------------------------------ */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --radius-sm: 2px;
  --radius-md: 4px;

  --border-width: 1px;
}