/* ============================================================
   AVANT INSIGHTS — Unified Design System
   Design tokens (CSS custom properties)
   Parent (navy + azure) + per-product theming
   TriAxis (teal) · Auditron (action navy, light-first)
   ============================================================ */

:root {
  /* ---------- NEUTRALS (cool slate) ---------- */
  --ai-n-0:   #FFFFFF;
  --ai-n-25:  #FBFCFD;
  --ai-n-50:  #F5F7F9;
  --ai-n-100: #ECEFF3;
  --ai-n-200: #DCE2E9;
  --ai-n-300: #C3CCD6;
  --ai-n-400: #9BA7B5;
  --ai-n-500: #717E8D;
  --ai-n-600: #525E6B;
  --ai-n-700: #3A444F;
  --ai-n-800: #262E37;
  --ai-n-900: #151B22;   /* ink */

  /* ---------- NAVY · shared family anchor (brand ink, dark surfaces) ---------- */
  --ai-navy-50:  #EAF1F8;
  --ai-navy-100: #CBDDEE;
  --ai-navy-200: #9CBCDB;
  --ai-navy-300: #6896C4;
  --ai-navy-400: #3E6FA3;
  --ai-navy-500: #23527E;
  --ai-navy-600: #193F63;
  --ai-navy-700: #122F4B;   /* brand navy */
  --ai-navy-800: #0D2238;
  --ai-navy-900: #0A1928;

  /* ---------- AZURE · Avant Insights parent accent ---------- */
  --ai-azure-50:  #EBF0FA;
  --ai-azure-100: #CFDCF2;
  --ai-azure-200: #A3BDE7;
  --ai-azure-300: #7298D6;
  --ai-azure-400: #4574C2;
  --ai-azure-500: #2A57A8;   /* accent base */
  --ai-azure-600: #21458A;
  --ai-azure-700: #19366B;
  --ai-azure-800: #122850;

  /* ---------- TRIAXIS · Teal (product accent) ---------- */
  --ai-triaxis-50:  #E5F4F2;
  --ai-triaxis-100: #BEE4DF;
  --ai-triaxis-200: #85CCC4;
  --ai-triaxis-300: #48ADA3;
  --ai-triaxis-400: #1E9389;
  --ai-triaxis-500: #0E8378;   /* accent base */
  --ai-triaxis-600: #0A6A61;
  --ai-triaxis-700: #08524B;
  --ai-triaxis-800: #063C37;

  /* ---------- AUDITRON · Action navy (product accent, light-first) ---------- */
  --ai-auditron-50:  #EBEDF4;
  --ai-auditron-100: #CDD2E2;
  --ai-auditron-200: #9AA3C2;
  --ai-auditron-300: #5E6A9B;
  --ai-auditron-400: #2C3C73;
  --ai-auditron-500: #0B1C50;   /* accent base — buttons & action links (from app.auditron.in) */
  --ai-auditron-600: #091640;
  --ai-auditron-700: #070F2E;
  --ai-auditron-800: #050A1F;
  --ai-auditron-navy:     #0B1C50;  /* Auditron app/base navy = the accent */
  --ai-auditron-gradient: linear-gradient(135deg, #0B1C50, #2A57A8);  /* navy → azure, sparingly */
  --ai-auditron-mark-green: #4CC23E; /* HERITAGE — logo swoosh ONLY. Never UI, data, fills, or text. */

  /* ---------- SEMANTIC ---------- */
  --ai-success: #1E7A4D;
  --ai-warning: #C0851C;
  --ai-danger:  #B5403A;
  --ai-info:    #2A57A8;
  --ai-auditron-cyan:   #06B6D4;  /* Auditron secondary */
  --ai-auditron-orange: #F97316;  /* Auditron tertiary */

  /* ---------- TYPEFACES ---------- */
  --ai-font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --ai-font-sans:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --ai-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (weight  size / line-height) ---------- */
  --ai-text-display:   600 56px/1.05  var(--ai-font-display);
  --ai-text-h1:        600 40px/1.12  var(--ai-font-sans);
  --ai-text-h2:        600 32px/1.18  var(--ai-font-sans);
  --ai-text-h3:        600 24px/1.30  var(--ai-font-sans);
  --ai-text-h4:        600 20px/1.35  var(--ai-font-sans);
  --ai-text-body-lg:   400 18px/1.60  var(--ai-font-sans);
  --ai-text-body:      400 16px/1.60  var(--ai-font-sans);
  --ai-text-body-sm:   400 14px/1.55  var(--ai-font-sans);
  --ai-text-caption:   500 13px/1.45  var(--ai-font-sans);
  --ai-text-overline:  500 12px/1.30  var(--ai-font-mono);
  --ai-tracking-overline: 0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --ai-space-0: 0;     --ai-space-1: 4px;   --ai-space-2: 8px;   --ai-space-3: 12px;
  --ai-space-4: 16px;  --ai-space-5: 20px;  --ai-space-6: 24px;  --ai-space-8: 32px;
  --ai-space-10: 40px; --ai-space-12: 48px; --ai-space-16: 64px; --ai-space-20: 80px;
  --ai-space-24: 96px; --ai-space-32: 128px;

  /* ---------- LAYOUT ---------- */
  --ai-container-max: 1200px;
  --ai-grid-columns: 12;
  --ai-grid-gutter:  24px;
  --ai-grid-margin:  32px;

  /* ---------- RADIUS ---------- */
  --ai-radius-xs: 3px; --ai-radius-sm: 6px; --ai-radius-md: 10px;
  --ai-radius-lg: 14px; --ai-radius-pill: 999px;

  /* ---------- SHADOW (cool-tinted) ---------- */
  --ai-shadow-xs: 0 1px 2px rgba(10,25,40,0.06);
  --ai-shadow-sm: 0 1px 3px rgba(10,25,40,0.08), 0 1px 2px rgba(10,25,40,0.05);
  --ai-shadow-md: 0 6px 16px rgba(10,25,40,0.08);
  --ai-shadow-lg: 0 16px 40px rgba(10,25,40,0.12);

  /* ---------- ROLE TOKENS · parent (Avant Insights), light ---------- */
  --ai-bg:           var(--ai-n-50);
  --ai-surface:      var(--ai-n-0);
  --ai-text:         var(--ai-n-900);
  --ai-text-muted:   var(--ai-n-500);
  --ai-border:       var(--ai-n-200);
  --ai-brand:        var(--ai-navy-700);
  --ai-accent:       var(--ai-azure-500);
  --ai-accent-hover: var(--ai-azure-600);
  --ai-accent-soft:  var(--ai-azure-50);
  --ai-on-accent:    #FFFFFF;
  --ai-focus-ring:   0 0 0 3px rgba(42,87,168,0.35);
}

/* ============================================================
   PRODUCT THEMES — set data-product on <html>/<body>/wrapper.
   Only accent roles change; neutrals + navy anchor stay shared.
   ============================================================ */

[data-product="triaxis"] {
  --ai-accent:       var(--ai-triaxis-500);
  --ai-accent-hover: var(--ai-triaxis-600);
  --ai-accent-soft:  var(--ai-triaxis-50);
  --ai-on-accent:    #FFFFFF;
  --ai-focus-ring:   0 0 0 3px rgba(14,131,120,0.35);
}

[data-product="auditron"] {
  --ai-accent:       var(--ai-auditron-500);
  --ai-accent-hover: var(--ai-auditron-600);
  --ai-accent-soft:  var(--ai-auditron-50);
  --ai-on-accent:    #FFFFFF;
  --ai-focus-ring:   0 0 0 3px rgba(11,28,80,0.30);
  /* data & evidence palette — meaning only, never buttons/links */
  --ai-au-data-cyan:   var(--ai-auditron-cyan);    /* synced / informational */
  --ai-au-data-orange: var(--ai-auditron-orange);  /* exception / attention */
  --ai-au-gradient:    var(--ai-auditron-gradient);
}

/* Auditron is light-first (above). Dark is a deliberate band only
   (footer / one CTA) — scope it to Auditron, never the global default. */
[data-product="auditron"][data-theme="dark"] {
  --ai-bg:         var(--ai-auditron-navy);   /* #0B1C50 */
  --ai-surface:    #112668;
  --ai-text:       #F2F5F8;
  --ai-text-muted: var(--ai-navy-300);
  --ai-border:     #1E2F6B;
  --ai-accent:       var(--ai-azure-300);  /* #7298D6 — legible action on dark */
  --ai-accent-hover: var(--ai-azure-200);
  --ai-on-accent:    #FFFFFF;
}