/* 01-variables.css – Design tokens & global reset
 * ─────────────────────────────────────────────────────────────
 * ALL colours, spacing, radii, shadows and transitions are
 * defined here. Never hardcode these values in component files.
 *
 * Usage in CSS:  color: var(--navy-dark);
 * Usage in JS:   getComputedStyle(document.body).getPropertyValue('--gold')
 * ─────────────────────────────────────────────────────────────
 */

/* ── Global reset ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--offwhite);
  color: var(--dark);
  overflow-x: hidden;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

:root {

  /* ── Brand colours ──────────────────────────────────────── */
  --navy:        #1B3A6B;   /* primary blue */
  --navy-dark:   #0F2447;   /* deep navy (heroes, dark BGs) */
  --navy-light:  #2E5FA3;   /* links, accents */
  --navy-mid:    #244d8a;   /* mid-tone button BGs */
  --gold:        #F5B800;   /* primary accent (CTA, badges) */
  --gold-dark:   #e6a800;   /* gold hover state */
  --red-cat:     #CC0001;   /* Catalan red (sec-title em) */

  /* ── Neutral palette ────────────────────────────────────── */
  --white:       #FFFFFF;
  --offwhite:    #F4F6FA;   /* section backgrounds */
  --lightgray:   #E8ECF3;   /* borders, dividers */
  --gray:        #5a6475;   /* body text, meta */
  --dark:        #111827;   /* headings, primary text */

  /* ── Semantic colours ───────────────────────────────────── */
  --success:     #059669;
  --warning:     #d97706;
  --danger:      #dc2626;
  --info:        #0ea5e9;

  /* ── Typography ─────────────────────────────────────────── */
  --font-body:   'Barlow', sans-serif;
  --font-cond:   'Barlow Condensed', sans-serif;
  --text-xs:     .72rem;
  --text-sm:     .82rem;
  --text-base:   .9rem;
  --text-md:     1rem;
  --text-lg:     1.15rem;
  --text-xl:     1.4rem;

  /* ── Spacing scale ──────────────────────────────────────── */
  --sp-1:   .25rem;   /*  4px */
  --sp-2:   .5rem;    /*  8px */
  --sp-3:   .75rem;   /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-16:  4rem;     /* 64px */

  /* ── Border radius ──────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow-md:  0 4px 14px rgba(0,0,0,.09);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.16);

  /* ── Transitions ────────────────────────────────────────── */
  --tr:         cubic-bezier(.25,.46,.45,.94);     /* standard ease */
  --tr-spring:  cubic-bezier(.22, 1, .36, 1);      /* spring (enter) */
  --tr-fast:    cubic-bezier(.55, 0,  1, .45);     /* fast out (exit) */
  --dur-fast:   .15s;
  --dur-base:   .22s;
  --dur-slow:   .38s;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max: 1200px;
  --section-pad:   4rem 0;
  --nav-h:         64px;   /* sticky nav height */

  /* ── Component-specific tokens ──────────────────────────── */
  /* Used by multiple component CSS files — change here once   */
  --card-bg:     white;
  --card-border: 1px solid var(--lightgray);
  --card-radius: var(--r-lg);
  --card-pad:    var(--sp-5) var(--sp-6);

  --badge-pad:   .15rem .6rem;
  --badge-r:     var(--r-sm);
  --badge-font:  .67rem;

  --btn-r:       var(--r-md);
  --btn-pad:     .55rem 1.2rem;

  /* ── Discipline accent (set dynamically via JS) ─────────── */
  --disc-color:  #1a6fb5;

}