/* ============================================================
   Teradix Spend Analytics 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 ---------- */
  /* Duplet Open carries no Arabic, so Arabic glyphs fall through it to
     whatever comes next. Naming good faces per platform is the whole
     difference between a considered page and one set in Times.

     Helvetica Neue Arabic leads, under the three names the foundry and
     the system font menus each use for it. It is licensed rather than
     bundled, so it resolves only where it is installed; drop the woff2
     into assets/fonts and add an @font-face in fonts.css to have it
     everywhere. After it, the platform faces: macOS and iOS resolve SF
     Arabic, Windows Segoe UI, Android and Linux Noto. Tahoma is the last
     readable stop before the generic. */
  --font-arabic: "Helvetica Neue Arabic", "HelveticaNeueLTArabic",
                 "Helvetica Neue LT Arabic", "SF Arabic", "Geeza Pro", "Segoe UI",
                 "Noto Sans Arabic", "Noto Naskh Arabic", "Dubai", Tahoma, Arial, sans-serif;
  --font-sans: "Duplet Open", var(--font-arabic), "Helvetica Neue", 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;
  }
}