/* =====================================================================
   Asseta — Data Connections · DESIGN TOKENS (single source of truth)
   Values taken from Figma node 2683-183711. Every color / shadow / radius /
   z-index / font in the module references a token below — change it here and
   it cascades. Map these onto your own theme variables when integrating.
   ===================================================================== */
:root {
  /* ---------- Color · text ---------- */
  --navy:          #1A1E46;             /* primary text + icons + dark frame */
  --navy-60:       rgba(26,30,70,.60);  /* secondary text */
  --navy-45:       rgba(26,30,70,.45);  /* muted / eyebrow */
  --navy-18:       rgba(26,30,70,.18);  /* faint stroke / progress ring */
  --navy-12:       rgba(26,30,70,.12);  /* hairline on cards */
  --navy-10:       rgba(26,30,70,.10);
  --navy-06:       rgba(26,30,70,.06);  /* subtle button fill */
  --navy-00:       rgba(26,30,70,0);    /* transparent navy (animation end) */
  --muted:         #888EA3;
  --muted-2:       #9499AC;
  --muted-3:       #7C8298;
  --accent:        #1554FF;             /* links, active states */
  --accent-hover:  #0F47E0;
  --accent-focus:  rgba(21,84,255,.13); /* focus ring */
  --accent-07:     rgba(21,84,255,.07); /* drag placeholder fill (react-grid-layout) */
  --accent-04:     rgba(21,84,255,.04); /* drop-target wash */
  --accent-range:  rgba(21,84,255,.10); /* date-range band (between start & end) */
  --danger:        #DC4A35;
  --white:         #FFFFFF;
  --text-primary:   var(--navy);    /* #1A1E46 main text */
  --text-secondary: var(--navy-60);  /* navy@60% #1a1e4699 — canonical secondary (labels / keys / meta) */
  --text-tertiary:  var(--navy-45);  /* navy@45% #1a1e4673 — canonical muted (placeholders / empty / eyebrow) */

  /* ---------- Surfaces ---------- */
  --bg:            #F2F4F3;   /* page / content background */
  --grid-header:   #F3F4F6;   /* AG Grid header background */
  --grid-row:      var(--white);   /* AG Grid rows / cells background (white; header keeps --grid-header) */
  --surface:       var(--white);   /* menus / drawers / modals / cards */
  --row-hover:     #F1F4FB;
  --row-open:      #F2F2F4;   /* expanded group row fill (analysis table) */
  --hover-soft:    #F3F4F8;
  --hover-strong:  #E9EBF1;
  --pill:          rgba(228,231,230,.72);  /* search / filter pill */
  --pill-soft:     rgba(228,231,230,.55);
  --pill-hover:    rgba(206,210,209,.9);

  /* ---------- Borders / strokes ---------- */
  --border:        var(--navy-12);  /* navy@12% #1a1e461f — canonical hairline */
  --border-soft:   #EEF0F4;
  --border-faint:  var(--border-soft);
  --border-strong: #D9DBDA;
  --border-hover:  #C9CDD8;
  --border-input:  var(--border-hover);

  /* ---------- Dark frame (sidebar + top bar) ---------- */
  --frame:         #1A1E46;
  --frame-active:  #2E3253;                 /* active sidebar item highlight */
  --frame-over:    rgba(255,255,255,.10);   /* search pill / chips on the frame */
  --on-frame-strong:rgba(255,255,255,.85);
  --on-frame-muted: rgba(255,255,255,.65);
  --on-frame-soft:  rgba(255,255,255,.60);
  --on-frame-faint: rgba(255,255,255,.50);
  --on-frame-hover: rgba(255,255,255,.06);
  --on-frame-fill:  rgba(255,255,255,.12);
  --on-frame-ring:  rgba(255,255,255,.25);
  --avatar-yh:     #6C5CE7;
  --av-bs:#A281FF; --av-pt:#98EBFF; --av-pb:#96E6B1; --av-ink:#05021C;

  /* ---------- Buttons ---------- */
  --btn-dark:       #16182B;
  --btn-dark-hover: #23263E;
  --seg-active:     #E8E9EE;   /* active segmented-control fill */

  /* ---------- Status / LOA badges (bg / fg / dot) ---------- */
  --st-neutral-bg:var(--border-soft); --st-neutral-fg:#5B6076; --st-neutral-dot:var(--muted-2);
  --st-blue-bg:   #E7EFFF; --st-blue-fg:   #1B66FF; --st-blue-dot:   var(--st-blue-fg);
  --st-purple-bg: #ECE7FF; --st-purple-fg: #6A44FF; --st-purple-dot: var(--st-purple-fg);
  --st-amber-bg:  #FFF4D6; --st-amber-fg:  #9A6B00; --st-amber-dot:  #F0A815;
  --st-green-bg:  #E7F6ED; --st-green-fg:  #2F9D5B; --st-green-dot:  #56C77D;
  --st-red-bg:    #FDEAE7; --st-red-fg:    var(--danger); --st-red-dot:    #F86756;

  /* ---------- Progress stepper ---------- */
  --progress-green:#00B477; --progress-gray:#E3E4E8;
  --stepper-dot:#D3D7DF; --stepper-dot-fg:#B9BDCB;

  /* ---------- Misc accents ---------- */
  --icon-faint:#B5B9C6;            /* idle column three-dots */
  --provider-logo:#309CDB;         /* placeholder provider monogram */
  --scrollbar-thumb:      rgba(26,30,70,.20); /* navy@20% #1a1e4633 — Figma scroll-bar */
  --scrollbar-thumb-hover:rgba(26,30,70,.32);
  --bulkbar:#01052D;               /* floating bulk-actions bar (from Asseta snapshot) */

  /* ---------- Scrims (drawer / modal backdrops) ---------- */
  --scrim:       rgba(13,16,38,.38);
  --scrim-modal: rgba(13,16,38,.42);

  /* ---------- Shadows ---------- */
  --shadow-menu:   0 16px 40px rgba(20,24,52,.16);
  --shadow-menu-2: 0 16px 40px rgba(20,24,52,.14);
  --shadow-pop:    0 16px 44px rgba(20,24,52,.18);
  --shadow-card:   0 6px 18px rgba(20,24,52,.07);
  --shadow-drawer: -14px 0 44px rgba(13,16,38,.14);
  --shadow-modal:  0 24px 64px rgba(13,16,38,.24);

  /* ---------- Typography ---------- */
  --font:'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  /* even type scale only */
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
  --fs-22:22px; --fs-24:24px; --fs-28:28px; --fs-30:30px;

  /* ---------- Spacing (2 / 4 / 8 grid) ---------- */
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px;

  /* ---------- Radii ---------- */
  --r-checkbox:5px; --r-frame:6px; --r-8:8px; --r-md:9px; --r-lg:11px;
  --r-card-s:12px; --r-card:14px; --r-xl:18px; --r-pill:999px; --r-input:12px;

  /* ---------- Icon sizes — use ONLY these steps ---------- */
  --ic-12:12px; --ic-16:16px; --ic-20:20px; --ic-24:24px;

  /* ---------- Z-index (overlay stack) ---------- */
  --z-menu:1000; --z-rowmenu:1500; --z-colmenu:1600;
  --z-scrim:2000; --z-drawer:2001; --z-modal:2200;

  /* ---------- Grid metrics ---------- */
  --row-h:52px; --header-h:38px; --sidebar-w:78px; --topbar-h:74px;
}