/* ============================================================
   eSuite — Colour Tokens
   VLE Support Ltd. Deep navy foundation, bright aqua accent,
   white + light-grey surfaces, pastel-tech status accents.
   ============================================================ */

:root {
  /* ---- Brand: Blue (PRIMARY — chrome, CTAs, links, focus) ---- */
  /* Anchored on #4265AF (eSuite Blue), promoted to the single dominant brand colour. */
  /* Token names kept as --navy-* for backwards-compatibility with existing components. */
  --navy-900: #293F6D; /* deepest — footer, large blocks, headings */
  --navy-850: #33497D; /* one step lighter than 900 — collapsible nav sub-panels, "home" nav item */
  --navy-800: #4265AF; /* base / primary — headers, nav, primary CTAs, links */
  --navy-700: #4B72C6; /* lifted — hover / raised chrome */
  --navy-600: #5481E0; /* lightest — borders & active edges on blue */

  /* ---- Aqua (SECONDARY accent — info, highlights, contrast on blue chrome) ---- */
  --aqua-700: #0673A1; /* WCAG-safe aqua for TEXT on white (5.8:1) + solid aqua buttons */
  --aqua-600: #0098D4; /* pressed / dark aqua — minimum for UI borders on white (3.3:1) */
  --aqua-500: #00AEEF; /* aqua base — info status, avatars, highlights */
  --aqua-400: #1BB8F1; /* light aqua — hover, gradients */
  --aqua-50:  #DFF4FC; /* aqua tint — info surfaces, badges */

  /* ---- eSuite Blue (now folded into the primary ramp — == --navy-800) ---- */
  --blue-500: #4265AF; /* primary brand blue (kept for Badge/ProgressBar "blue" tone) */
  --blue-50:  #E7ECF6; /* primary tint — soft accent surfaces, badges */

  /* ---- Status & accent (pastel-tech) ---- */
  --orange-700: #A33D00; /* badge text on orange-50 at 11px — 5.50:1. Use for all orange Badge text */
  --orange-600: #C14800; /* orange text-on-tint at 13px+ (4.23:1 on orange-50 — fails at 11px badge size) */
  --orange-500: #FA650D; /* orange — add / warning CTA / outlines */
  --orange-50:  #FEE8D8;

  --red-700:  #A01010;
  --red-500:  #DE1F1F; /* danger / destructive / at-risk */
  --red-50:   #FDDCDC;

  --yellow-700: #9A6200;
  --yellow-500: #FCA833; /* caution / due-soon */
  --yellow-50:  #FEF4DC;

  --green-700: #09630B; /* dark green — strong positive text */
  --green-500: #27AC2A; /* green — achieved / on-track / positive */
  --green-50:  #D6F5D6;

  /* ---- Neutrals ---- */
  --white:     #FFFFFF;
  --grey-50:   #F1F2F7; /* light grey — page background */
  --row-stripe: color-mix(in srgb, var(--grey-50) 50%, #fff); /* zebra fill — grey-50 thinned toward white. Full-strength grey-50 IS the page colour, so a striped row inside a white card reads as the page showing through. */
  --grey-100:  #E1E6EB; /* blue white — separators, tracks, inputs */
  --grey-300:  #C7CCD4; /* mid hairline */
  --grey-400:  #9F9F9F; /* grey — muted text, placeholders */
  --grey-600:  #6B6B6B; /* secondary text */
  --grey-700:  #4D4D4D; /* dark grey — body text */
  --black:     #000000;

  /* ---- Slate (blue-tinted text neutrals — warmer against the navy brand than flat grey) ---- */
  --slate-500: #67728A; /* subtle icons, separators-as-text (4.8:1 on white) */
  --slate-600: #535E73; /* muted / annotation text — 6.5:1 on white, 5.8:1 on grey-50 */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--grey-50);   /* "Blue White" main background */
  --surface-card:    var(--white);     /* white boxes on top of page */
  --surface-sunken:  var(--grey-50);   /* metric tiles, wells */
  --surface-stripe:  var(--row-stripe); /* zebra table rows — never grey-50 (see token) */
  --surface-nav-sub: var(--navy-850);  /* collapsible nav sub-panel, solid (never translucent over a white parent row) */
  --surface-navy:    var(--navy-800);  /* navy chrome: headers, nav, footer */
  --surface-navy-hi: var(--navy-700);

  /* Text */
  --text-strong:  var(--navy-900);  /* headings — deep brand blue */
  --text-body:    var(--grey-700);  /* body copy */
  --text-muted:   var(--slate-600); /* meta, captions, placeholders — 6.5:1 on white, 5.8:1 on grey-50/stripes, 5.6:1 on aqua-50 hover. Was grey-600 (4.7:1 on grey-50 — blended in). grey-400 fails at 2.6:1; reserve it for non-text/decorative use. */
  --text-annotation: var(--slate-600); /* hints, helper text, footnotes, chart captions — pair with --text-xs + --leading-annotation, sentence case */
  --text-on-navy: var(--white);
  --text-on-navy-muted: rgba(255, 255, 255, 0.85); /* 4.6:1 on navy-800 (WCAG 1.4.3 AA); 0.62 failed at 3.3:1 */
  --text-link:    var(--navy-800);  /* links — primary blue (5.7:1 on white) */
  --text-info:    var(--aqua-700); /* info/aqua text on white — accessible (5.8:1) */

  /* Accents */
  --accent:        var(--navy-800);  /* primary blue — buttons, active states */
  --accent-hover:  var(--navy-700);  /* lighter blue on hover */
  --accent-press:  #34528C;          /* darker than base for pressed */
  --accent-soft:   var(--blue-50);   /* soft blue tint surface */

  /* Borders */
  --border-subtle: rgba(10, 26, 47, 0.10); /* hairline on white */
  --border-input:  #8C8C8C;                /* form-field boundary — 3.4:1 on white (WCAG 1.4.11). grey-100 failed at 1.3:1 */
  --border-control-subtle: var(--slate-500); /* outlined icon/stepper buttons (Previous/Next) — 4.83:1. grey-300 failed at 1.6:1; grey-300 is decorative hairline only */
  --border-accent: var(--orange-500);      /* orange outline on internal shapes */
  --border-focus:  var(--navy-800);  /* primary blue focus border */
  --nav-active-rail: var(--orange-500);   /* 4px current-page rail on navy nav chrome */
  --nav-active-fill: var(--white);        /* current-page fill on navy nav chrome */

  /* Status semantics */
  --status-positive: var(--green-500);
  --status-caution:  var(--yellow-500);
  --status-warning:  var(--orange-500);
  --status-danger:   var(--red-500);
  --status-info:     var(--aqua-500);
  --status-neutral:  var(--grey-400);

  /* Component defaults */
  --avatar-fill-default: var(--aqua-700); /* white initials 5.28:1. aqua-500 failed at 2.5:1 */
}