/* ==========================================================================
   tokens.css — RightSpend design tokens.
   Ported from the live platform theme (rightspendapp config/tailwind.config.js)
   plus the semantic naming layer from the AI-Agents admin companion doc.
   Light theme only — the brand defines no dark theme.

   This file must load FIRST; every other stylesheet consumes these variables.
   ========================================================================== */

:root {
  /* ---- primary ramp (tailwind colors.primary) ------------------------- */
  --rs-p50:  #F8FBFD;
  --rs-p100: #EAF0F6;
  --rs-p200: #E1E8F2;
  --rs-p300: #CAD5E3;
  --rs-p400: #9CABBF;
  --rs-p500: #7688A2;
  --rs-p600: #60738F;
  --rs-p700: #3F5372;
  --rs-p750: #213A5E;
  --rs-navy: #0D2A4E;          /* primary.800 — the brand dark */
  --rs-navy-accent: #113665;   /* primary.accent */
  --rs-navy-hover:  #144685;   /* primary.hover */

  /* ---- secondary / accent (tailwind colors.secondary) ----------------- */
  --rs-cyan: #40BBE7;
  --rs-cyan-deep: #00A4C7;     /* cyan-on-white: links, numerals, code pills */
  --rs-gradient-brand: linear-gradient(135deg, #0D2A4E 0%, #144685 55%, #40BBE7 140%);
  --rs-gradient-avatar: linear-gradient(135deg, #0D2A4E 0%, #40BBE7 100%);

  /* ---- lifecycle palette (tailwind) ----------------------------------- */
  --rs-prelaunch: #E0EAA4;
  --rs-launch: #FFD998;
  --rs-growth: #FFF1A1;
  --rs-mature: #96CEE0;
  --rs-maintenance: #F7A19E;

  /* ---- semantic status: bg / fg pairs --------------------------------- */
  --rs-good: #22C55E;  --rs-good-bg: #E9F9EF;  --rs-good-fg: #12813F;
  --rs-warn: #F59E0B;  --rs-warn-bg: #FDF4E3;  --rs-warn-fg: #8A5A06;
  --rs-bad:  #DC2626;  --rs-bad-bg:  #FDEAEA;  --rs-bad-fg:  #A61B1B;
  --rs-info-bg: #EEF7FC; --rs-info-line: #CFE9F6; --rs-info-fg: #1F4A63;
  --rs-neutral-bg: #F2F4F7;

  /* ---- surfaces -------------------------------------------------------- */
  --rs-page: #F4F8FB;
  --rs-surface: #FFFFFF;
  --rs-surface-2: #F3F8FB;     /* table headers, subtle wells */
  --rs-line: var(--rs-p200);
  --rs-line-strong: var(--rs-p300);

  /* ---- ink ------------------------------------------------------------- */
  --rs-ink:   var(--rs-navy);
  --rs-ink-2: var(--rs-p700);
  --rs-ink-3: var(--rs-p600);
  --rs-ink-4: var(--rs-p500);
  --rs-on-navy: #FFFFFF;
  --rs-on-navy-2: #B8C8DE;

  /* ---- typography ------------------------------------------------------ */
  --rs-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rs-font-brand: 'Montserrat', var(--rs-font-sans);
  --rs-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rs-fs-2xs: 11px;
  --rs-fs-xs: 11.5px;
  --rs-fs-sm: 12.5px;
  --rs-fs-13: 13px;
  --rs-fs-base: 14px;
  --rs-fs-md: 0.9375rem;       /* tailwind fontSize.md */
  --rs-fs-lg: 16px;
  --rs-fs-h3: 16px;
  --rs-fs-h2: 22px;
  --rs-fs-h1: 30px;

  --rs-lh-tight: 1.25;
  --rs-lh: 1.6;
  --rs-track-caps: .06em;

  /* ---- spacing (4px scale) -------------------------------------------- */
  --rs-1: 4px;   --rs-2: 8px;   --rs-3: 12px;  --rs-4: 16px;  --rs-5: 20px;
  --rs-6: 24px;  --rs-7: 32px;  --rs-8: 40px;  --rs-9: 48px;  --rs-10: 64px;

  /* ---- radii (tailwind borderRadius sm/md + app scale) ---------------- */
  --rs-r-sm: 0.225rem;
  --rs-r-md: 0.35rem;
  --rs-r-lg: 8px;
  --rs-r-xl: 12px;
  --rs-r-2xl: 16px;
  --rs-r-pill: 999px;

  /* ---- elevation (tailwind boxShadow + companion doc) ------------------ */
  --rs-sh-border: 0 0 0 1px rgba(13, 42, 78, .07);
  --rs-sh-panel:  0 2px 0 0 rgba(13, 42, 78, .08), 0 0 0 1px rgba(13, 42, 78, .07);
  --rs-sh-inner-border: inset 0 -1px 0 0 var(--rs-p200);
  --rs-sh-card:   0 4px 14px rgba(13, 42, 78, .05);
  --rs-sh-raised: 0 8px 24px rgba(13, 42, 78, .08);
  --rs-sh-overlay: 0 24px 60px rgba(13, 42, 78, .22);

  /* ---- motion (tailwind ease-out-rs) ---------------------------------- */
  --rs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rs-dur-1: 120ms;
  --rs-dur-2: 180ms;
  --rs-dur-3: 260ms;
  --rs-dur-4: 400ms;

  /* ---- focus ----------------------------------------------------------- */
  --rs-focus-ring: 0 0 0 3px rgba(64, 187, 231, .45);
  --rs-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, .30);

  /* ---- layout ---------------------------------------------------------- */
  --rs-topnav-h: 72px;
  --rs-sidebar-w: 220px;
  --rs-content-max: 1280px;
  --rs-wrapper-min: 1080px;    /* tailwind minWidth.wrapper */
  --rs-editor-rail-w: 216px;
  --rs-editor-preview-w: 380px;   /* holds a real chat panel, not a mock */

  /* ---- z-index scale ---------------------------------------------------- */
  --rs-z-raised: 10;
  --rs-z-sticky: 100;
  --rs-z-drawer: 200;
  --rs-z-topnav: 300;
  --rs-z-dropdown: 400;
  --rs-z-modal: 500;
  --rs-z-toast: 600;

  /* ======================================================================
     Legacy aliases — the original 11 variables, re-pointed at brand values.
     KEEP THESE. Roughly forty rules across the app still consume them; the
     aliases guarantee anything not individually restyled still lands
     on-brand rather than reverting to the old slate/blue palette.
     Note `--primary` now means NAVY, so anything that wants the cyan accent
     must say so explicitly (see .pbar-fill in components.css).
     ====================================================================== */
  --bg: var(--rs-page);
  --panel: var(--rs-surface);
  --panel-2: var(--rs-p100);
  --text: var(--rs-ink);
  --muted: var(--rs-ink-3);
  --primary: var(--rs-navy);
  --primary-2: var(--rs-navy-hover);
  --danger: var(--rs-bad);
  --ok: var(--rs-good);
  --border: var(--rs-line);
  --header: var(--rs-navy);
  --radius: var(--rs-r-xl);
}

/* Breakpoints. @media values must be literals, so these are documented here
   and repeated by hand in layout.css / screens.css:
     480px · 768px · 1024px · 1180px · 1280px · 1440px                     */