/* ============================================================
   Teradix CS Platform — design tokens
   Ported from the Teradix Design System (design/teradix-ds) used by
   AI Tender, so both products speak the same visual language.

   Colour rule, inherited from the DS and extended here:
     · BLUE   #0047DE — the product. Actions, links, selection, data.
     · VIOLET #5830B4 — the assistant. Anything the AI says or offers.
     · CYAN   #40E6C1 — the active marker on navy. Used sparingly.
   Never reference the raw --tx-* ramp in components; use the aliases.

   The DS ships light-only. The dark theme below is additive — it
   re-points the same aliases, so no component needs a dark rule.
   ============================================================ */

:root {
  /* ---------- Brand palette (raw) ---------- */
  --tx-blue-700: #042c8a;   /* primary pressed / active */
  --tx-blue-600: #0047de;   /* PRIMARY brand blue — the one true blue */
  --tx-blue-500: #2a64e8;   /* hover lift */
  --tx-blue-100: #e4ecff;   /* selected row / chip fill */
  --tx-blue-50:  #f5f8ff;   /* soft primary surface */

  --tx-navy-900: #001645;   /* deepest navy — sidebar, strong text */
  --tx-navy-700: #001a52;   /* default body ink */
  --tx-navy-500: #032a7d;   /* secondary active */

  /* The assistant's violet. Promoted from AI Tender, where it marks
     what the AI says as distinct from what the data says. */
  --tx-violet-700: #4a24a8;
  --tx-violet-600: #5830b4;
  --tx-violet-500: #7c4ddc;
  --tx-violet-100: #ece6fb;
  --tx-violet-50:  #f7f5fe;

  --tx-cyan: #40e6c1;
  --tx-red:  #e80101;

  /* ---------- Neutral ramp ---------- */
  --tx-white:    #ffffff;
  --tx-grey-50:  #f7f8fb;
  --tx-grey-100: #eff0f4;
  --tx-mist:     #f3f2f8;   /* app shell, faint cast of the accent */
  --tx-grey-200: #e6e8ee;
  --tx-grey-300: #e0e0e0;
  --tx-grey-400: #d0d3da;
  --tx-grey-500: #afb4b9;
  --tx-grey-600: #8a9099;
  --tx-grey-700: #5b6472;

  /* ---------- Semantic (raw) ---------- */
  --tx-success-600: #159e80;
  --tx-success-700: #2e8b57;
  --tx-success-100: #d8f7ec;
  --tx-warning-600: #f0a027;
  --tx-warning-100: #fdeca5;
  --tx-danger-600:  #e51414;
  --tx-danger-100:  #fdecec;
  --tx-info-600:    #0047de;
  --tx-info-100:    #e4ecff;

  /* ---------- Typography ---------- */
  --font-sans: "Duplet Open", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 40px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.08em;

  --font-display:  var(--weight-bold)     var(--text-5xl)/var(--leading-tight) var(--font-sans);
  --font-h1:       var(--weight-bold)     var(--text-4xl)/var(--leading-tight) var(--font-sans);
  --font-h2:       var(--weight-semibold) var(--text-3xl)/var(--leading-snug)  var(--font-sans);
  --font-h3:       var(--weight-semibold) var(--text-2xl)/var(--leading-snug)  var(--font-sans);
  --font-h4:       var(--weight-semibold) var(--text-xl)/var(--leading-snug)   var(--font-sans);
  --font-body-lg:  var(--weight-regular)  var(--text-lg)/var(--leading-normal) var(--font-sans);
  --font-body:     var(--weight-regular)  var(--text-base)/var(--leading-normal) var(--font-sans);
  --font-body-sm:  var(--weight-regular)  var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-label:    var(--weight-semibold) var(--text-sm)/var(--leading-snug)   var(--font-sans);
  --font-caption:  var(--weight-regular)  var(--text-xs)/var(--leading-snug)   var(--font-sans);
  --font-overline: var(--weight-semibold) var(--text-2xs)/var(--leading-snug)  var(--font-sans);

  /* ---------- Spacing (4px grid) ---------- */
  --space-0: 0;   --space-1: 2px;  --space-2: 4px;  --space-3: 8px;
  --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px;
  --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px;

  /* ---------- Radius ---------- */
  --radius-none: 0; --radius-xs: 3px; --radius-sm: 6px;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --header-height: 60px;
  --sidebar-width: 244px;
  --sidebar-width-collapsed: 64px;
  --page-max: 1560px;
  --content-pad: 24px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* ---------- Z-index ---------- */
  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300;
  --z-overlay: 400; --z-modal: 500; --z-toast: 600;
}

/* ============================================================
   LIGHT THEME — the DS default
   ============================================================ */
:root, [data-theme="light"] {
  color-scheme: light;

  --color-primary:        var(--tx-blue-600);
  --color-primary-hover:  var(--tx-blue-500);
  --color-primary-active: var(--tx-blue-700);
  --color-primary-soft:   var(--tx-blue-50);
  --color-primary-tint:   var(--tx-blue-100);
  --color-secondary:      var(--tx-navy-900);
  --color-accent:         var(--tx-cyan);

  /* The assistant */
  --color-ai:        var(--tx-violet-600);
  --color-ai-hover:  var(--tx-violet-500);
  --color-ai-tint:   var(--tx-violet-100);
  --color-ai-soft:   var(--tx-violet-50);
  --ai-gradient:     linear-gradient(140deg, var(--tx-violet-500), var(--tx-violet-700));

  --text-strong:     var(--tx-navy-900);
  --text-body:       var(--tx-navy-700);
  --text-muted:      var(--tx-grey-700);
  --text-subtle:     var(--tx-grey-600);
  --text-on-primary: var(--tx-white);
  --text-link:       var(--tx-blue-600);

  --surface-page:    var(--tx-mist);
  --surface-card:    var(--tx-white);
  --surface-raised:  var(--tx-white);
  --surface-sunken:  var(--tx-grey-50);
  --surface-tint:    var(--tx-blue-50);
  --surface-inverse: var(--tx-navy-900);

  --border-subtle:  var(--tx-grey-200);
  --border-default: var(--tx-grey-400);
  --border-strong:  var(--tx-grey-500);
  --border-input:   var(--tx-grey-300);
  --border-focus:   var(--tx-blue-600);

  --status-success-fg: var(--tx-success-700); --status-success-bg: var(--tx-success-100);
  --status-warning-fg: #9a6a06;               --status-warning-bg: var(--tx-warning-100);
  --status-danger-fg:  var(--tx-danger-600);  --status-danger-bg:  var(--tx-danger-100);
  --status-info-fg:    var(--tx-blue-600);    --status-info-bg:    var(--tx-info-100);
  --status-neutral-fg: var(--tx-grey-700);    --status-neutral-bg: var(--tx-grey-100);

  --shadow-xs: 0 1px 2px 0 rgba(0, 22, 69, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 22, 69, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(0, 22, 69, 0.10);
  --shadow-lg: 0 12px 28px -6px rgba(0, 22, 69, 0.16);
  --shadow-xl: 0 24px 48px -12px rgba(0, 22, 69, 0.22);
  --focus-ring: 0 0 0 3px rgba(0, 71, 222, 0.28);
  --hairline: 1px solid var(--border-subtle);

  /* Chart surface tints — KPI tiles and chart fills */
  --tint-blue:   #eef3ff;
  --tint-green:  #e8f8f2;
  --tint-amber:  #fef6e6;
  --tint-red:    #fdeeee;
  --tint-violet: #f4f0fd;
  --tint-cyan:   #e6faf6;
  --tint-grey:   #f4f5f8;

  --chart-grid: rgba(0, 22, 69, 0.07);
  --chart-text: var(--tx-grey-700);
}

/* ============================================================
   DARK THEME — navy-grounded, same aliases re-pointed
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:        #4d82ff;
  --color-primary-hover:  #6d99ff;
  --color-primary-active: #2a64e8;
  --color-primary-soft:   rgba(77, 130, 255, 0.10);
  --color-primary-tint:   rgba(77, 130, 255, 0.18);
  --color-secondary:      #0b1533;
  --color-accent:         var(--tx-cyan);

  --color-ai:        #9a7bec;
  --color-ai-hover:  #b39bf2;
  --color-ai-tint:   rgba(154, 123, 236, 0.18);
  --color-ai-soft:   rgba(154, 123, 236, 0.09);
  --ai-gradient:     linear-gradient(140deg, #7c4ddc, #4a24a8);

  --text-strong:     #eef2ff;
  --text-body:       #c9d3ec;
  --text-muted:      #8f9cbd;
  --text-subtle:     #6f7c9e;
  --text-on-primary: #ffffff;
  --text-link:       #6d99ff;

  --surface-page:    #070c1e;
  --surface-card:    #0e1631;
  --surface-raised:  #131d3d;
  --surface-sunken:  #0a1128;
  --surface-tint:    rgba(77, 130, 255, 0.08);
  --surface-inverse: #060b1a;

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-input:   rgba(255, 255, 255, 0.14);
  --border-focus:   #4d82ff;

  --status-success-fg: #4ade9f; --status-success-bg: rgba(21, 158, 128, 0.16);
  --status-warning-fg: #f7c264; --status-warning-bg: rgba(240, 160, 39, 0.16);
  --status-danger-fg:  #ff7b7b; --status-danger-bg:  rgba(229, 20, 20, 0.16);
  --status-info-fg:    #6d99ff; --status-info-bg:    rgba(77, 130, 255, 0.16);
  --status-neutral-fg: #8f9cbd; --status-neutral-bg: rgba(255, 255, 255, 0.07);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.36);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.58);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.66);
  --focus-ring: 0 0 0 3px rgba(77, 130, 255, 0.40);

  --tint-blue:   rgba(77, 130, 255, 0.10);
  --tint-green:  rgba(21, 158, 128, 0.12);
  --tint-amber:  rgba(240, 160, 39, 0.12);
  --tint-red:    rgba(229, 20, 20, 0.12);
  --tint-violet: rgba(154, 123, 236, 0.12);
  --tint-cyan:   rgba(64, 230, 193, 0.10);
  --tint-grey:   rgba(255, 255, 255, 0.05);

  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-text: #8f9cbd;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms;
  }
}