/* ============================================================
   NEXTGEN ALYGN - COLOR TOKENS
   Base palette (brand anchors) + semantic aliases.
   Source: NextGen Alygn Brand Book, pages 01 & 05.
   ============================================================ */

:root {
  /* ---------- Base palette · Neutrals ---------- */
  --ng-obsidian:      #0A0A0A; /* Obsidian Black - primary text, black logo */
  --ng-graphite:      #16161A; /* lifted near-black - raised dark surfaces  */
  --ng-carbon:        #202027; /* dark card / panel                          */
  --ng-titanium-deep: #5A5A5F; /* Titanium Gray - supporting UI, 2ndary text */
  --ng-titanium:      #A7A7A7; /* Titanium - muted text, hairlines           */
  --ng-silver:        #C0C0C0; /* Silver Chrome base tone                     */
  --ng-mist:          #E4E4E7; /* light divider / hairline                    */
  --ng-bone:          #F2F2F2; /* Bone - default page background              */
  --ng-white:         #FFFFFF; /* Bone White - reverse + cards                */

  /* ---------- Base palette · Digital Lavender (primary accent) ---------- */
  --ng-lavender-50:   #F3EFFF;
  --ng-lavender-100:  #E7DEFF;
  --ng-lavender-200:  #CDBEFF;
  --ng-lavender-300:  #B29BFF;
  --ng-lavender-400:  #9878FF;
  --ng-lavender-500:  #7B5CFF; /* PRIMARY - Digital Lavender (#7B5CFF)        */
  --ng-lavender-600:  #6746E6;
  --ng-lavender-700:  #5435C0;
  --ng-lavender-800:  #3F2891;
  --ng-lavender-900:  #2B1B63;
  --ng-lavender:        var(--ng-lavender-500);
  --ng-lavender-bright: #8A56FF; /* alt bright lavender (Brand Book p.01)     */

  /* ---------- Base palette · Plasma Blue (secondary accent) ---------- */
  --ng-plasma:        #1E60FF;
  --ng-plasma-bright: #4B84FF;
  --ng-plasma-deep:   #1544C0;

  /* ---------- Accessible accent roles (WCAG 2.2 AA verified) ----------
     Brand lavender #7B5CFF is DECORATIVE only. For text and small
     controls use the roles below. Contrast (approx, verify on change):
       #6746E6 on #F2F2F2 bone  ≈ 6.6:1  ✓ AA normal text & links
       #FFFFFF on #6746E6       ≈ 7.5:1  ✓ AA white-on-lavender buttons
       #9878FF on #0A0A0A obs.  ≈ 5.7:1  ✓ AA text on dark
       #5A5A5F on #F2F2F2 bone  ≈ 6.2:1  ✓ AA muted body text
       #7B5CFF on #F2F2F2 bone  ≈ 3.7:1  ✗ normal text (✓ large/UI ≥3:1)  */
  --accent-brand:          var(--ng-lavender-500); /* decorative: glow, big keywords, streaks */
  --accent-text-light:     var(--ng-lavender-600); /* #6746E6 - lavender text/links on light */
  --accent-text-dark:      var(--ng-lavender-400); /* #9878FF - lavender text on dark */
  --accent-action:         var(--ng-lavender-600); /* #6746E6 - small white-text button bg */
  --accent-action-hover:   var(--ng-lavender-700); /* #5435C0 */
  --text-muted-accessible: var(--ng-titanium-deep); /* #5A5A5F - muted body text that passes AA */

  /* ========== Semantic aliases (light context - default) ========== */
  /* Text */
  --text-primary:   var(--ng-obsidian);
  --text-secondary: var(--ng-titanium-deep);
  --text-muted:     var(--ng-titanium);
  --text-inverse:   var(--ng-white);
  --text-accent:    var(--accent-text-light); /* accessible lavender text (#6746E6) */
  --text-on-accent: var(--ng-white);

  /* Surfaces */
  --surface-page:           var(--ng-bone);
  --surface-card:           var(--ng-white);
  --surface-sunken:         #EAEAEC;
  --surface-inverse:        var(--ng-obsidian);
  --surface-inverse-raised: var(--ng-graphite);
  --surface-accent:         var(--ng-lavender-500);
  --surface-accent-subtle:  var(--ng-lavender-50);

  /* Borders / hairlines */
  --border-subtle:  var(--ng-mist);
  --border-default: #D4D4D8;
  --border-strong:  var(--ng-titanium-deep);
  --border-inverse: rgba(255, 255, 255, 0.14);
  --border-accent:  var(--ng-lavender-500);

  /* Accents / interaction - action roles are AA-accessible (see above) */
  --accent:        var(--ng-lavender-500); /* brand/decorative fills & borders */
  --accent-hover:  var(--ng-lavender-600);
  --accent-active: var(--ng-lavender-700);
  --accent-2:      var(--ng-plasma); /* Plasma Blue - dataviz / status / rare gradient ONLY */
  --focus-ring:    var(--ng-lavender-600); /* #6746E6 - ≥3:1 on bone for focus outline */

  /* ---------- Status roles (WCAG AA on their surfaces) ---------- */
  --ng-red-600:    #C4361F; --ng-red-50:   #FCEEEB;
  --ng-green-700:  #1F7A44; --ng-green-50: #E9F6EE;
  --ng-amber-700:  #8A5A00; --ng-amber-50: #FBF3E2;
  --danger:         var(--ng-red-600);   --danger-surface:  var(--ng-red-50);
  --success:        var(--ng-green-700);  --success-surface: var(--ng-green-50);
  --warning:        var(--ng-amber-700);  --warning-surface: var(--ng-amber-50);
  --info:           var(--ng-plasma-deep); --info-surface:   #E8EEFF;
}

/* ========== Dark context ==========
   Apply class .ng-dark (or nest inside it) to flip the semantic
   aliases for obsidian backgrounds. Base values are untouched. */
.ng-dark {
  --text-primary:   var(--ng-white);
  --text-secondary: #C9C9CE;
  --text-muted:     var(--ng-titanium);
  --text-inverse:   var(--ng-obsidian);
  --text-accent:    var(--accent-text-dark); /* #9878FF - accessible on obsidian */

  --surface-page:           var(--ng-obsidian);
  --surface-card:           var(--ng-graphite);
  --surface-sunken:         #0E0E11;
  --surface-inverse:        var(--ng-bone);
  --surface-inverse-raised: var(--ng-white);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.30);
  --border-accent:  var(--ng-lavender-400);

  /* Status text lightened for obsidian surfaces */
  --danger:  #FF8A75; --success: #7FD6A0; --warning: #F0C071; --info: var(--ng-plasma-bright);
  --danger-surface: rgba(255,138,117,.12); --success-surface: rgba(127,214,160,.12);
  --warning-surface: rgba(240,192,113,.12); --info-surface: rgba(75,132,255,.14);
}

/* ========== On-accent context ==========
   Token scope for content sitting on the lavender accent surface
   (e.g. Card variant="lavender"). White-on-lavender text tokens. */
.ng-on-accent {
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-muted:     rgba(255, 255, 255, 0.70);
  --text-accent:    #ffffff;
  --border-default: rgba(255, 255, 255, 0.28);
  --border-subtle:  rgba(255, 255, 255, 0.20);
}