/* AIGA — Color tokens
   Base values sampled directly from the real AIGA logo artwork
   (assets/logos/aiga-logo-horizontal.png) plus the warm cream/sand
   backgrounds and coral accent established in the reference marketing
   mockup (uploads/maquette_aiga_k_12_vivante_et_premium.html). */

:root {
  /* ---- Base palette ---- */
  --navy-900: #0A1931; /* deepest brand navy, footers/hero overlays */
  --navy-800: #0F2A4C; /* logo wordmark navy (sampled) */
  --navy-700: #16407A; /* mid navy for hover/links */
  --navy-400: #6E85A6; /* muted navy, disabled text on light */

  --teal-500: #21A89E; /* logo ribbon teal (sampled) */
  --teal-400: #4FC2B8;
  --teal-100: #E3F6F4;

  --emerald-600: #0C7F5E; /* logo ribbon emerald, deeper (sampled) */
  --emerald-500: #12A67D; /* logo ribbon emerald (sampled) */
  --emerald-100: #DFF5EC;

  --gold-600: #C88D1C; /* logo tree gold, deeper (sampled) */
  --gold-500: #F5A623; /* logo arrow gold, primary accent (sampled) */
  --gold-400: #F8C15C;
  --gold-100: #FDECC8;

  --coral-500: #FF7A59; /* warm secondary accent from marketing site */
  --coral-400: #FF8F73;
  --coral-100: #FFEBE6;

  --cream: #FFFCF8;   /* primary warm background */
  --sand: #FFF5EB;    /* secondary warm background / card fill */
  --white: #FFFFFF;

  --ink-900: #0A1931;  /* body text on light */
  --ink-700: #33445E;  /* secondary text on light */
  --ink-400: #7D8AA0;  /* tertiary / placeholder text */
  --line: #EFE3D3;     /* hairline borders on cream/sand */

  /* ---- Semantic aliases ---- */
  --color-brand-primary: var(--navy-800);
  --color-brand-secondary: var(--gold-500);
  --color-brand-tertiary: var(--teal-500);
  --color-brand-accent: var(--coral-500);

  --surface-page: var(--cream);
  --surface-alt: var(--sand);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-900);

  --text-heading: var(--navy-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-400);
  --text-on-inverse: var(--white);
  --text-on-inverse-muted: rgba(255,255,255,0.72);

  --border-subtle: var(--line);
  --border-inverse: rgba(255,255,255,0.14);

  --cta-primary-bg: var(--coral-500);
  --cta-primary-bg-hover: var(--coral-400);
  --cta-primary-text: var(--white);

  --cta-secondary-bg: var(--gold-500);
  --cta-secondary-bg-hover: var(--gold-400);
  --cta-secondary-text: var(--navy-900);

  --focus-ring: var(--teal-500);
}