/*
 * ═══════════════════════════════════════════════════════════════
 *  SSDC WEBSITE — DESIGN TOKENS
 *  All brand colours, spacing and type-scale in one place.
 *  fonts.css must be imported before this file.
 * ═══════════════════════════════════════════════════════════════
 */

:root {
  /* ── Brand colours (approved — do not change without client sign-off) ── */
  --maroon:       #8b1a1a;
  --maroon-deep:  #6b1414;
  --saffron:      #d96820;
  --gold:         #c9a83a;
  --gold-soft:    #e6cc7a;
  --navy:         #0d2c4a;
  --navy-deep:    #081d33;
  --cream:        #fbf5e4;
  --cream-2:      #f3e9cc;

  /* ── Semantic aliases ── */
  --ink:          var(--navy);
  --paper:        var(--cream);
  --paper-alt:    var(--cream-2);
  --rule:         rgba(13,44,74,.14);
  --rule-strong:  rgba(13,44,74,.28);
  --muted:        rgba(13,44,74,.58);

  /* ── Type scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   clamp(28px, 3.5vw, 42px);
  --text-2xl:  clamp(30px, 3.5vw, 48px);
  --text-3xl:  clamp(40px, 5.5vw, 72px);
  --text-hero: clamp(44px, 6vw,   84px);

  /* ── Spacing ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 60px;

  /* ── Layout ── */
  --max-width: 1280px;
  --gutter:    clamp(20px, 5vw, 60px);

  /* ── Transitions ── */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --t-fast: 140ms var(--ease);
  --t-base: 220ms var(--ease);
}