/* Stabilise Finance — design tokens.
 *
 * Adapted from the Stabilise Dashboard design system (Next.js + shadcn).
 * Light is default; the `[data-theme="dark"]` selector switches dark.
 *
 * Semantic colour rule: theme tokens NEVER on coloured backgrounds.
 * Status/severity colours use explicit hex pairs with the
 * double-inversion pattern in components.css.
 */

:root {
  /* ── Neutrals (page chrome) ─────────────────────────────── */
  --background:           #f5f5f4;   /* warm stone-50, not pure white */
  --foreground:           #14181f;   /* near-black */
  --card:                 #ffffff;
  --card-foreground:      #14181f;
  --muted:                #fafaf9;
  --muted-foreground:     #57534e;   /* stone-600 */
  --border:               #e3e6ec;
  --border-strong:        #c7cdd6;
  --input:                #e3e6ec;

  /* ── Primary (action) ───────────────────────────────────── */
  --primary:              #5F66CD;   /* Stabilise indigo */
  --primary-foreground:   #ffffff;
  --secondary:            #e7e5e4;   /* stone-200 */
  --secondary-foreground: #14181f;
  --accent:               #eef2ff;   /* indigo-50 */
  --accent-foreground:    #14181f;

  /* ── Destructive (red) ──────────────────────────────────── */
  --destructive:          #ef4444;
  --destructive-foreground: #ffffff;

  /* ── Focus ring ─────────────────────────────────────────── */
  --ring:                 #5F66CD;
  --ring-alpha:           rgba(95, 102, 205, 0.5);

  /* ── Sidebar (slightly elevated) ────────────────────────── */
  --sidebar:                  #fafaf9;
  --sidebar-foreground:       #14181f;
  --sidebar-border:           #e3e6ec;
  --sidebar-accent:           #eef2ff;
  --sidebar-accent-foreground:#14181f;

  /* ── Chart series (qualitative, WCAG AA on white) ───────── */
  --chart-1: #5F66CD;   /* indigo (primary) */
  --chart-2: #0d9488;   /* teal */
  --chart-3: #d97706;   /* amber */
  --chart-4: #db2777;   /* pink */
  --chart-5: #7c3aed;   /* purple */
  --chart-6: #14B8A6;
  --chart-7: #6366F1;
  --chart-8: #F97316;

  /* ── Money sentiment ────────────────────────────────────── */
  --positive:             #10B981;   /* emerald */
  --positive-fg:          #047857;
  --negative:             #EF4444;   /* red */
  --negative-fg:          #B91C1C;
  --neutral:              #6B7280;   /* gray-500 */
  --warning:              #F59E0B;   /* amber */
  --warning-fg:           #B45309;
  --critical:             #DC2626;   /* red-600 */

  /* ── Spacing scale (8 px grid) ──────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 px */
  --space-2:  0.5rem;    /* 8 px */
  --space-3:  0.75rem;   /* 12 px */
  --space-4:  1rem;      /* 16 px */
  --space-5:  1.25rem;   /* 20 px */
  --space-6:  1.5rem;    /* 24 px */
  --space-8:  2rem;      /* 32 px */
  --space-10: 2.5rem;    /* 40 px */
  --space-12: 3rem;      /* 48 px */
  --space-16: 4rem;      /* 64 px */

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm: 0.25rem;  /* 4 px */
  --radius-md: 0.375rem; /* 6 px */
  --radius-lg: 0.5rem;   /* 8 px (default) */
  --radius-xl: 0.75rem;  /* 12 px (cards) */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20, 24, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.05),
               0 1px 2px rgba(20, 24, 31, 0.03);
  --shadow:    0 4px 12px rgba(20, 24, 31, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(20, 24, 31, 0.10),
               0 8px 10px -6px rgba(20, 24, 31, 0.08);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", var(--font-sans);
  --font-display: "Cal Sans", "Plus Jakarta Sans", var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                  Menlo, Monaco, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 px */
  --text-sm:   0.875rem;  /* 14 px */
  --text-base: 1rem;      /* 16 px */
  --text-lg:   1.125rem;  /* 18 px (H3 / card title) */
  --text-xl:   1.5rem;    /* 24 px (H2) */
  --text-2xl:  1.875rem;  /* 30 px (H1) */
  --text-stat: 2rem;      /* 32 px (KPI numbers) */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:  100ms ease-out;
  --transition:       150ms ease-out;
  --transition-slow:  300ms ease-out;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width:  16rem;   /* 256 px */
  --topbar-height:  3.5rem;  /* 56 px */
  --page-max:       80rem;   /* 1280 px content cap on wide screens */
}

[data-theme="dark"] {
  /* ── Neutrals ───────────────────────────────────────────── */
  --background:           #0c0a09;   /* stone-950 */
  --foreground:           #fafaf9;
  --card:                 #1c1917;   /* stone-900 */
  --card-foreground:      #fafaf9;
  --muted:                #292524;   /* stone-800 */
  --muted-foreground:     #a8a29e;   /* stone-400 */
  --border:               #292524;
  --border-strong:        #44403c;
  --input:                #292524;

  --primary:              #818CF8;   /* indigo-400 (brightened) */
  --primary-foreground:   #1e1b4b;
  --secondary:            #292524;
  --secondary-foreground: #d6d3d1;
  --accent:               #1e1b4b;   /* indigo-900 */
  --accent-foreground:    #fafaf9;

  --destructive:          #ef4444;
  --destructive-foreground: #ffffff;

  --ring:                 #818CF8;
  --ring-alpha:           rgba(129, 140, 248, 0.5);

  --sidebar:                  #141211;
  --sidebar-foreground:       #fafaf9;
  --sidebar-border:           #292524;
  --sidebar-accent:           #292524;
  --sidebar-accent-foreground:#fafaf9;

  --chart-1: #818CF8;
  --chart-2: #14b8a6;
  --chart-3: #f59e0b;
  --chart-4: #f472b6;
  --chart-5: #a78bfa;

  --positive:    #6EE7B7;
  --positive-fg: #34D399;
  --negative:    #FCA5A5;
  --negative-fg: #F87171;
  --neutral:     #D1D5DB;
  --warning:     #FCD34D;
  --warning-fg:  #F59E0B;
  --critical:    #F87171;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
}