/* -----------------------------------------------------------------------------
   MFTD 2027 - design tokens

   THE single source of truth for colour, type, spacing and elevation.
   No other stylesheet may declare a raw colour value.

   The palette is not a guess: it was sampled from assets/img/LOGO.png
   (3543x2480, transparent background, 18 flat colours) and every text pair was
   measured against WCAG 2.1. Ratios are recorded in the comments so a future
   change can be checked instead of assumed.
   ----------------------------------------------------------------------------- */

:root {
  /* --- Brand ---------------------------------------------------------------
     Sampled directly from the logo. The percentage is that colour's share of
     the logo's opaque pixels. */
  --c-primary:        #263A77;  /* 74.3% of the logo - 10.75:1 on white  AA  */
  --c-primary-dark:   #1B2C5C;  /* derived - 13.45:1 on white            AA  */
  --c-secondary:      #2E4C89;  /* 19.4% of the logo -  8.36:1 on white  AA  */

  /* Accent, 6.3% of the logo. Only 3.84:1 on white and 2.8:1 on navy, so it is
     DECORATIVE ONLY: rules, icons, chart fills, borders. Never body text. */
  --c-accent:         #5085C2;
  --c-accent-text:    #3F6BA6;  /* derived -  5.43:1 on white            AA  */
  --c-accent-soft:    #A6C4E5;  /* derived -  5.96:1 on --c-primary      AA  */

  /* --- Neutrals ----------------------------------------------------------- */
  --c-ink:            #101828;  /* 17.75:1 on white                      AAA */
  --c-muted:          #5B6B85;  /*  5.40:1 on white                      AA  */
  --c-bg:             #FFFFFF;
  --c-surface:        #F5F7FB;  /* navy-tinted, ink on it is 16.55:1     AAA */
  --c-surface-2:      #EEF2F9;  /* second elevation, cards on surface        */
  --c-border:         #E4E9F2;  /* decorative separators                     */
  --c-border-strong:  #98A2B3;  /* form controls - needs 3:1 per WCAG 1.4.11 */

  /* --- State ------------------------------------------------------------- */
  --c-success:        #0F7B4F;  /*  5.29:1 on white                      AA  */
  --c-success-bg:     #E6F4EE;
  --c-warning:        #B25E09;  /*  4.67:1 on white                      AA  */
  --c-warning-bg:     #FDF3E7;
  --c-danger:         #B42318;  /*  6.57:1 on white                      AA  */
  --c-danger-bg:      #FDECEA;
  --c-info:           #3F6BA6;
  --c-info-bg:        #EEF2F9;

  /* --- Badge pack colour coding (used on cards and on the printed badge) -- */
  --c-pack-free:       #5B6B85;
  --c-pack-visitor:    #2E4C89;
  --c-pack-networking: #3F6BA6;
  --c-pack-vip:        #1B2C5C;

  /* --- Typography -------------------------------------------------------- */
  --font-title: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale: clamp(min, preferred, max). Mobile-first - the min value is
     what a 360px phone gets, the max what a wide desktop gets. */
  --fs-display: clamp(2.75rem, 7vw, 5rem);      /* hero title             */
  --fs-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:      clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1.6vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;
  --fs-eyebrow: 0.875rem;                        /* uppercase kicker       */

  --lh-tight:   1.08;   /* display type            */
  --lh-heading: 1.18;
  --lh-body:    1.65;   /* long-form readability   */

  --ls-display: -0.01em;
  --ls-eyebrow: 0.14em; /* letter-spaced uppercase */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Spacing - 4px base ------------------------------------------------ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Vertical rhythm between page sections, fluid so mobile does not waste
     screen height on whitespace. */
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --container:       1200px;
  --container-narrow: 780px;   /* long-form text - keeps a readable measure */
  --gutter:          clamp(1rem, 4vw, 2.5rem);
  --header-h:        4.5rem;

  /* --- Radii ------------------------------------------------------------- */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* --- Elevation ---------------------------------------------------------
     Navy-tinted rather than black: a neutral black shadow reads as grey dirt
     against the navy palette. */
  --shadow-card:  0 8px 30px rgba(38, 58, 119, .08);
  --shadow-hover: 0 14px 40px rgba(38, 58, 119, .14);
  --shadow-sm:    0 2px 8px rgba(38, 58, 119, .06);
  --shadow-header: 0 1px 0 var(--c-border), 0 4px 20px rgba(38, 58, 119, .05);

  /* --- Motion -----------------------------------------------------------
     Discreet. Institutional register, not a product launch. */
  --t-fast:  120ms;
  --t-base:  220ms;
  --t-slow:  420ms;
  --ease:    cubic-bezier(.22, .61, .36, 1);

  /* --- Focus ring - visible on both light and navy backgrounds ----------- */
  --focus-ring: 0 0 0 3px rgba(80, 133, 194, .45);

  /* --- Stacking --------------------------------------------------------- */
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-toast:   500;
}

/* Honour the operating-system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}