/* ============================================================
   NICE Framework — Color tokens
   Primary brand: NICE Magenta #DA2067 (sampled from logo)
   ============================================================ */

:root {
  /* ---- Brand: NICE Teal (from brand graphic) ---- */
  --brand-50:  #E6FAF6;
  --brand-100: #C2F2EA;
  --brand-200: #8DE6D7;
  --brand-300: #54D6C2;
  --brand-400: #25C2AC;
  --brand-500: #11A595;   /* primary — deep enough for white text */
  --brand-600: #0C8A7D;
  --brand-700: #0A6E64;
  --brand-800: #08524B;
  --brand-900: #063B36;
  --brand-bright: #2BE3C1; /* vivid teal accent — use on dark navy only */

  /* ---- Neutral: navy-tinted cool slate ---- */
  --ink-950: #07182B;
  --ink-900: #0B2138;
  --ink-800: #132C45;
  --ink-700: #1E3A56;
  --ink-600: #2E4A68;
  --ink-500: #4A6483;
  --ink-400: #6E87A4;
  --ink-300: #97AAC2;
  --ink-200: #C3D0DF;
  --ink-100: #E2E9F0;
  --ink-75:  #ECF1F6;
  --ink-50:  #F4F7FB;
  --white:   #FFFFFF;

  /* ---- Deep corporate navy (hero/footer/dark surfaces) ---- */
  --abyss-600: #143A66;
  --abyss-700: #0E2C50;
  --abyss-800: #0A2240;
  --abyss-900: #07213A;

  /* ---- Functional / status ---- */
  --green-500:  #1E8E5A;
  --green-100:  #D8F0E4;
  --amber-500:  #E8A020;
  --amber-100:  #FBEDCB;
  --red-500:    #D92D20;
  --red-100:    #FADBD8;
  --blue-500:   #2563B8;
  --blue-100:   #DBE8FA;

  /* ---- GRC risk heat scale ---- */
  --risk-low:      #2E9E6B;
  --risk-medium:   #E8A020;
  --risk-high:     #EE6B2D;
  --risk-critical: #D92D20;
  --risk-low-bg:      #DEF2E8;
  --risk-medium-bg:   #FBEDCB;
  --risk-high-bg:     #FBE0CF;
  --risk-critical-bg: #FADBD8;

  /* ============================================================
     SEMANTIC ALIASES — light theme (default)
     ============================================================ */
  --bg:            var(--ink-50);
  --bg-subtle:     var(--ink-75);
  --surface:       var(--white);
  --surface-2:     var(--ink-50);
  --surface-sunken:var(--ink-75);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --divider:       var(--ink-100);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  var(--white);

  --brand:          var(--brand-500);
  --brand-hover:    var(--brand-600);
  --brand-active:   var(--brand-700);
  --brand-contrast: var(--white);
  --brand-tint:     var(--brand-50);
  --brand-tint-2:   var(--brand-100);

  --link:          var(--brand-600);
  --focus-ring:    color-mix(in srgb, var(--brand-500) 45%, transparent);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  /* dark-on-light hero / footer surface */
  --inverse-surface: var(--abyss-900);
  --inverse-text:    var(--ink-100);
}

/* ============================================================
   DARK THEME — toggled via [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --bg:            var(--ink-950);
  --bg-subtle:     var(--abyss-900);
  --surface:       var(--ink-900);
  --surface-2:     var(--ink-800);
  --surface-sunken:var(--ink-950);

  --border:        #262A38;
  --border-strong: #353A4A;
  --divider:       #232735;

  --text:          var(--ink-75);
  --text-muted:    var(--ink-300);
  --text-subtle:   var(--ink-400);
  --text-inverse:  var(--ink-900);

  --brand:          var(--brand-400);
  --brand-hover:    var(--brand-300);
  --brand-active:   var(--brand-200);
  --brand-contrast: var(--ink-950);
  --brand-tint:     color-mix(in srgb, var(--brand-500) 16%, var(--ink-900));
  --brand-tint-2:   color-mix(in srgb, var(--brand-500) 28%, var(--ink-900));

  --link:          var(--brand-300);
  --focus-ring:    color-mix(in srgb, var(--brand-400) 55%, transparent);

  --inverse-surface: var(--ink-75);
  --inverse-text:    var(--ink-900);

  --green-100: color-mix(in srgb, var(--green-500) 22%, var(--ink-900));
  --amber-100: color-mix(in srgb, var(--amber-500) 22%, var(--ink-900));
  --red-100:   color-mix(in srgb, var(--red-500) 22%, var(--ink-900));
  --blue-100:  color-mix(in srgb, var(--blue-500) 22%, var(--ink-900));
}