/* Anthracite Group design tokens.
   Every brand value lives here. Brand updates should be a change to this file only.
   Contrast rules (WCAG AA):
     - Dark sections (Black/Slate): body text Ivory, secondary text Stone.
       Steel Gray is NEVER text on dark (~3.7:1); borders/rules only.
     - Light sections (Ivory): body text Black, secondary text Steel Gray (~4.9:1).
       Never Stone text on Ivory. */

:root {
  /* Raw palette */
  --color-black: #0B0B0B;  /* Anthracite Black - primary */
  --color-slate: #2E2E2E;  /* Slate Gray - secondary */
  --color-steel: #6B6B6B;  /* Steel Gray - accent */
  --color-stone: #C9C6BE;  /* Stone - light */
  --color-ivory: #F6F5F2;  /* Ivory - background */

  /* Typography */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 400;
  --weight-heading-strong: 700;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;  /* 17px */
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.4rem + 3.5vw, 4rem);
  --leading-body: 1.6;
  --leading-heading: 1.15;
  --tracking-label: 0.2em;
  --tracking-wide: 0.35em;

  /* Shape */
  --radius: 0;
  --rule-width: 1px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --content-max: 72rem;
  --prose-max: 40rem;

  /* Semantic roles: light (Ivory) is the default */
  --bg: var(--color-ivory);
  --surface: var(--color-ivory);
  --text: var(--color-black);
  --text-muted: var(--color-steel);
  --rule: var(--color-stone);
  --accent: var(--color-steel);
  --btn-bg: var(--color-ivory);
  --btn-text: var(--color-black);
  --btn-border: var(--color-black);
  --btn-hover-bg: var(--color-stone);
  --btn-hover-text: var(--color-black);
  --focus: var(--color-black);
  --input-bg: var(--color-ivory);
  --input-border: var(--color-steel);
  --input-text: var(--color-black);
}

/* Dark section: Anthracite Black */
.section--dark {
  --bg: var(--color-black);
  --surface: var(--color-slate);
  --text: var(--color-ivory);
  --text-muted: var(--color-stone);
  --rule: var(--color-steel);
  --accent: var(--color-stone);
  --btn-bg: var(--color-black);
  --btn-text: var(--color-ivory);
  --btn-border: var(--color-ivory);
  --btn-hover-bg: var(--color-stone);
  --btn-hover-text: var(--color-black);
  --focus: var(--color-stone);
  --input-bg: var(--color-slate);
  --input-border: var(--color-stone);
  --input-text: var(--color-ivory);
}

/* Slate band: Stone text on Slate */
.section--slate {
  --bg: var(--color-slate);
  --surface: var(--color-black);
  --text: var(--color-stone);
  --text-muted: var(--color-stone);
  --rule: var(--color-steel);
  --accent: var(--color-stone);
  --btn-bg: var(--color-slate);
  --btn-text: var(--color-ivory);
  --btn-border: var(--color-ivory);
  --btn-hover-bg: var(--color-stone);
  --btn-hover-text: var(--color-black);
  --focus: var(--color-stone);
}

/* Light section: Ivory (same as default, explicit for clarity) */
.section--light {
  --bg: var(--color-ivory);
  --surface: var(--color-ivory);
  --text: var(--color-black);
  --text-muted: var(--color-steel);
  --rule: var(--color-stone);
  --accent: var(--color-steel);
  --btn-bg: var(--color-ivory);
  --btn-text: var(--color-black);
  --btn-border: var(--color-black);
  --btn-hover-bg: var(--color-stone);
  --btn-hover-text: var(--color-black);
  --focus: var(--color-black);
}