/* ============================================================
   PeopleTalk Design System — Color Tokens
   Aligned to the CPHR BC & Yukon Brand Standards Update (2026):
     • Mid Blue  #0074AD (PMS 7690)  — primary "2026" brand blue (links/buttons)
     • Cyan      #00A0DF             — bright accent (decorative only; fails as
                                       text on light, ~3:1 — never use for copy)
     • Dark Blue #293E6B             — accent surfaces + footer band
     • Web Navy  #121C31             — darkest; titles/headings (replaces the old
                                       warm near-black) and inverse surfaces
     • Bleu Clair#D0EAF9 (PMS 7457)  — light blue tint
     • Sable     #DCCCC1 (PMS 481)   — warm sand neutral
     • Fond      #F6F2EF (Warm Grey 1C) — warm page background
     • Web Grey  #E3E3E8             — light UI surface / border
     • Photo Overlay #5E5050 (50% α) — warm grey image wash
   The palette is warm-neutral (Fond/Sable) over a blue brand spine.
   Text-contrast policy: titles = web navy (AAA on light); body = warm ink-700;
   links = mid blue #0074AD (AA); primary fills = mid blue #0074AD (AA); footer = dk
   blue with white / neutral-300 text (AA+). Cyan is decorative, never text.
   ============================================================ */

:root {
  /* ============================================================
     CPHR BRAND SWATCHES — the source-of-truth values
     ============================================================ */
  --cphr-mid-blue:      #0074AD; /* PMS 7690 — primary "2026" brand blue */
  --cphr-cyan:          #00A0DF; /* logo "HR" — bright accent (decorative only) */
  --cphr-dark-blue:     #293E6B; /* CPHR dk blue — accent surfaces + footer */
  --cphr-web-navy:      #121C31; /* CPHR web navy — darkest; titles/headings */
  --cphr-bleu-clair:    #D0EAF9; /* PMS 7457 */
  --cphr-sable:         #DCCCC1; /* PMS 481 — warm sand */
  --cphr-fond:          #F6F2EF; /* Warm Grey 1C — page */
  --cphr-web-grey:      #E3E3E8; /* CPHR web grey — light UI surface/border */
  --cphr-photo-overlay: #5E5050; /* warm grey, used at 50% over photos */

  /* --- Brand: Blue (Mid Blue primary, Cyan accent) --------- */
  --azure-50:  #EAF6FC;
  --azure-100: #D0EAF9; /* CPHR Bleu Clair */
  --azure-200: #A9D8F1;
  --azure-300: #6FC0E7;
  --azure-400: #00A0DF; /* CPHR Cyan — bright accent (decorative, not text on light) */
  --azure-500: #0074AD; /* CPHR Mid Blue — primary brand */
  /* 600/700 were off-palette Dazil blues (#0A6398/#0C5480) — retired per iilo
     (Oct 2026). Kept as aliases so the darker steps resolve to approved
     CPHR colours: 600 = Mid Blue, 700 = CPHR Dk Blue. */
  --azure-600: var(--azure-500);
  --azure-700: var(--navy-600);
  --azure-800: #0D4566;
  --azure-900: #0E3650;

  /* --- Brand: Navy (CPHR dark blue) ------------------------ */
  --navy-50:  #E9EEF5;
  --navy-100: #C6D4E5;
  --navy-200: #98B0CE;
  --navy-300: #6787B2;
  --navy-400: #3E5F92;
  --navy-500: #2E4677;
  --navy-600: #293E6B; /* CPHR dk blue — accent surfaces + footer band */
  --navy-700: #1F3054;
  --navy-800: #182644;
  --navy-900: #121C31; /* CPHR web navy — darkest */

  /* --- Ink: warm charcoal (text + dark chrome) ------------- */
  --ink-50:  #F1EEEC;
  --ink-100: #DED9D6;
  --ink-200: #BBB2AD;
  --ink-300: #8E837D;
  --ink-400: #6A605B;
  --ink-500: #4E4642;
  --ink-600: #39322F;
  --ink-700: #2A2523; /* body text — warm */
  --ink-800: #1E1A19;
  --ink-900: #161211; /* near-black warm — primary text */

  /* --- Slate: warm taupe supporting (variety / "News") ---- */
  --slate-100: #EBE4DE;
  --slate-300: #C7B8AC;
  --slate-400: #A2907F;
  --slate-500: #6E6157;

  /* --- Warm neutrals (chrome & surfaces) ------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F2EF; /* CPHR Fond — page background */
  --neutral-100: #EFE9E4;
  --neutral-200: #E4DBD3;
  --neutral-300: #D3C6BB; /* borders — toward Sable */
  --neutral-400: #A99C90;
  --neutral-500: #5E5050; /* muted text — CPHR grey (was Dazil #6F655D); 6.9:1 on Fond */
  --neutral-600: #5E5050; /* CPHR Photo Overlay warm grey */
  --neutral-700: #453B39;
  --neutral-800: #2E2725;
  --neutral-900: #1C1716;

  /* --- Semantic status ------------------------------------- */
  --success-100: #D7EFDD;
  --success-500: #2E8B57;
  --success-700: #1E5E3A;
  --warning-100: #FBEAC9;
  --warning-500: #C9881A;
  --warning-700: #8A5C0E;
  --danger-100:  #F7D8D3;
  --danger-500:  #C8412B;
  --danger-700:  #8E2A1B;
  --info-100:    #D3E9F8;
  --info-500:    #0E88C6;
  --info-700:    var(--azure-500);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--cphr-fond); /* warm page wash (Fond) */
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--navy-900);
  --surface-brand:   var(--azure-500);
  --surface-brand-soft: var(--azure-50);
  --surface-accent-soft: var(--navy-50);
  --surface-sand:    var(--cphr-sable); /* warm sand panel */
  --photo-overlay:   rgba(94, 80, 80, 0.5); /* CPHR photo wash */

  /* Text */
  --text-strong:   var(--cphr-web-navy); /* titles/headings — CPHR web navy (was warm near-black) */
  --text-body:     var(--ink-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--cphr-photo-overlay); /* tertiary labels — CPHR grey only, no off-palette greys */
  --text-inverse:  var(--neutral-50);
  --text-brand:    var(--cphr-mid-blue);
  --text-accent:   var(--cphr-mid-blue);
  --text-link:     var(--cphr-mid-blue); /* 4.6:1 on Fond, 5.1:1 on white */

  /* Borders & lines */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--cphr-web-navy);
  --border-brand:  var(--azure-500);
  --rule-ink:      var(--cphr-web-navy); /* heavy section rules sit with titles */

  /* Interactive — primary (Mid Blue) */
  --action-bg:        var(--azure-500);
  --action-bg-hover:  var(--cphr-dark-blue); /* hover = CPHR Dk Blue, not a darker off-palette blue */
  --action-bg-active: var(--cphr-web-navy);
  --action-fg:        var(--neutral-0);

  /* Interactive — accent (navy, deep) */
  --accent-bg:        var(--navy-600);
  --accent-bg-hover:  var(--cphr-web-navy); /* approved CPHR colours only */
  --accent-bg-active: var(--cphr-web-navy);
  --accent-fg:        var(--neutral-0);

  /* Focus */
  --focus-ring: var(--azure-500);

  /* Accent palette for CONFIGURABLE feature colours (newsletter stream defaults
     + suggested values for the stream-colour field in wp-admin). Topic/category
     styling is deliberately uniform — never hardcode colours per category. */
  --cat-wellness:   #2E8C7E;
  --cat-dei:        #7C6597;
  --topic-people:     #7C6597;
  --topic-strategy:   var(--navy-600);
  --topic-governance: var(--slate-500);
  --topic-profdev:    var(--azure-500);
  --topic-digital:    #1189B8;
  --topic-insights:   #2E8C7E;
}