/*
  Design tokens — CSD Finance
  Source: Master Project Brief §7 (colour), §8 (typography), §31 (tokens).
  Only the foundations the bootstrap shell actually uses are defined here;
  new tokens are added when a real component needs them, not speculatively.
*/
:root {
  /* Brand colours (Human Finance palette, Brief §7) */
  --brand-aubergine: #32263a;
  --brand-terracotta: #c86f52;
  --brand-sand: #e9ddd0;
  --brand-warm-white: #faf8f4;
  --brand-ink: #202020;

  /* Semantic colour tokens */
  --color-background-primary: var(--brand-warm-white);
  --color-background-secondary: var(--brand-sand);
  /* Home v1 SPEC: editorial section background, distinct from Sand. */
  --color-surface-warm: #f3ece3;
  --color-surface-dark: var(--brand-aubergine);
  --color-text-primary: var(--brand-ink);
  --color-text-inverse: var(--brand-warm-white);
  /* 8.8:1 on Warm White — secondary body text on light surfaces. */
  --color-text-secondary: #4b4453;
  /* 8.5:1 on Sand — secondary body text on the Sand surface specifically. */
  --color-text-secondary-on-sand: #3e3746;
  /* rgba(warm-white, .78) — 8.78:1 on Aubergine — secondary text on dark. */
  --color-text-inverse-muted: rgba(250, 248, 244, 0.78);
  --color-accent-primary: var(--brand-terracotta);
  /* 4.67:1 on --brand-warm-white — use for links/accent text and for
     filled-button backgrounds carrying light text. Raw terracotta
     (--color-accent-primary, 3.38:1 on warm white) stays decorative-only:
     borders, dots, and large text (>=24px), never normal-size text or
     button fills. */
  --color-accent-text: #a65c44;
  /* 4.76:1 on Sand, 5.43:1 on --color-surface-warm — small accent labels
     on those surfaces, and the primary button's hover fill. */
  --color-accent-text-strong: #8e4e39;
  /* 5.28:1 on Aubergine — accent text on the dark surface. */
  --color-accent-on-dark: #d88a6f;
  --color-border-subtle: color-mix(
    in srgb,
    var(--brand-aubergine) 12%,
    transparent
  );
  /* More visible than --color-border-subtle — interactive element outlines
     (e.g. the mobile nav toggle), matching the reference's border alpha.
     Below the 3:1 non-text AA guideline — see base.css usage comment. */
  --color-border-strong: color-mix(
    in srgb,
    var(--brand-aubergine) 30%,
    transparent
  );
  --color-border-inverse-subtle: color-mix(
    in srgb,
    var(--brand-warm-white) 18%,
    transparent
  );

  /* Typography (Brief §8: Newsreader + Manrope, self-hosted, clamp()-based) */
  --font-family-display:
    "Newsreader Variable", ui-serif, Georgia, "Times New Roman", serif;
  --font-family-body:
    "Manrope Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-display-sm: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --font-size-display-lg: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);

  /* Home v1 SPEC display scale — for the hero/final-CTA H1/H2 and section
     H2 tiers once those sections are built (slices 2-3). Kept separate
     from the existing display-sm/-lg above so defining them now doesn't
     change the current placeholder sections' rendered size. */
  --font-size-display-hero: clamp(3.25rem, 7vw, 6.5rem);
  --font-size-display-section: clamp(2.5rem, 4.5vw, 4rem);
  --line-height-display-tight: 1;
  --letter-spacing-display: -0.02em;
  --letter-spacing-display-tight: -0.025em;

  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-body: 1.6;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  /* Home v1 SPEC: editorial section vertical padding, ~64px to ~128px. */
  --space-section: clamp(4rem, 9vw, 8rem);

  /* Layout. Gutter interpolates 20px (mobile) -> 80px (1440px desktop,
     matching the Home v1 reference exactly); max-width = 1440px minus
     two 80px gutters. */
  --content-max-width: 80rem;
  --content-padding-inline: clamp(1.25rem, -0.15rem + 5.7vw, 5rem);
  --grid-gap: 20px;

  /* Shape (Brief §32: restrained radii, not the default SaaS rounded look) */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --border-width-hairline: 1px;

  /* Motion (Brief §19: subtle, explanatory only) */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}