/* =========================================================
   Marco Lombart — Design Tokens (mlTokens)
   Shared CSS custom properties for all ML Lightning Web
   Components. Loaded via loadStyle() from the mlTokens
   static resource in each LWC's connectedCallback.
   Ported from wireframe/assets/css/wireframe.css :root.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* =========================================================
     Marco Lombart Brand Guidelines — Official Palette
     Primary: ML Blue + Stone Blue.
     Accents: AEC Blue, Warm Gray.
     ML Green = sparing accent ONLY (logo, small UI dots, thin
     accent rules). Never on text, backgrounds, or large fills.
     ========================================================= */
  --ml-c-ml-blue:       #001624; /* ML Blue — primary */
  --ml-c-ml-blue-600:   #002E3D; /* hover/darker */
  --ml-c-stone:         #B7C9D3; /* Stone Blue — primary secondary */
  --ml-c-stone-200:     #D6E1E8; /* lighter stone */
  --ml-c-stone-100:     #EAF0F3; /* stone tint (backgrounds) */
  --ml-c-aec-blue:      #1D4289; /* AEC Blue — accent */
  --ml-c-aec-blue-600:  #162F66;
  --ml-c-ml-green:      #97D700; /* ML Green — sparing accent only */
  --ml-c-warm-gray:     #545454; /* Dark / Warm Gray — body copy accent */
  --ml-c-light-gray:    #EDEBE6; /* Light Gray — neutral surface */

  /* Role aliases — point existing rules at the brand palette.
     Primary CTAs/backgrounds are ML Blue (NOT green). */
  --ml-c-primary:       var(--ml-c-ml-blue);
  --ml-c-primary-600:   var(--ml-c-ml-blue-600);
  --ml-c-secondary:     var(--ml-c-ml-blue);
  --ml-c-secondary-600: var(--ml-c-ml-blue-600);
  --ml-c-secondary-400: #1A5A70;
  --ml-c-accent:        var(--ml-c-ml-green); /* use sparingly only */

  /* Legacy aliases for older rules */
  --ml-c-navy:      #001624;
  --ml-c-navy-600:  var(--ml-c-ml-blue-600);
  --ml-c-navy-400:  var(--ml-c-secondary-400);
  --ml-c-blue:      var(--ml-c-aec-blue);
  --ml-c-blue-600:  var(--ml-c-aec-blue-600);

  /* Neutrals */
  --ml-c-slate:     var(--ml-c-warm-gray);
  --ml-c-slate-300: #AEB8C2;
  --ml-c-border:    #DCE4E8;
  --ml-c-surface:   #F4F7F9;
  --ml-c-surface-2: var(--ml-c-light-gray);
  --ml-c-white:     #FFFFFF;
  --ml-c-text:      var(--ml-c-ml-blue);
  --ml-c-text-muted: var(--ml-c-warm-gray);

  /* On-color text tokens — ML Blue bg = white text */
  --ml-c-on-primary:   #FFFFFF;
  --ml-c-on-secondary: #FFFFFF;

  /* Type — Montserrat per brand guide */
  --ml-f-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ml-fs-xs: 12px;
  --ml-fs-sm: 14px;
  --ml-fs-md: 16px;
  --ml-fs-lg: 20px;
  --ml-fs-xl: 28px;
  --ml-fs-2xl: 40px;
  --ml-fs-3xl: 56px;
  --ml-fs-4xl: 72px;

  /* Spacing — 8pt grid */
  --ml-s-1: 4px;
  --ml-s-2: 8px;
  --ml-s-3: 12px;
  --ml-s-4: 16px;
  --ml-s-5: 24px;
  --ml-s-6: 32px;
  --ml-s-7: 48px;
  --ml-s-8: 64px;
  --ml-s-9: 96px;

  /* Radius / shadow */
  --ml-r-sm: 4px;
  --ml-r-md: 8px;
  --ml-r-lg: 16px;
  --ml-r-xl: 24px;
  --ml-sh-sm: 0 1px 2px rgba(0,62,81,0.06), 0 1px 3px rgba(0,62,81,0.08);
  --ml-sh-md: 0 4px 12px rgba(0,62,81,0.08), 0 2px 4px rgba(0,62,81,0.06);
  --ml-sh-lg: 0 12px 32px rgba(0,62,81,0.14);

  --ml-header-h: 112px;
}