/* ============================================================================
   TradesPad: Journaling & Backtesting — Design System Tokens
   ============================================================================ */

:root {
  /* Primary Scale */
  --color-primary-50: #f7f7f7;
  --color-primary-100: #f0f0f0;
  --color-primary-200: #dbdbdb;
  --color-primary-300: #c2c2c2;
  --color-primary-400: #9e9e9e;
  --color-primary-500: #808080;
  --color-primary-600: #6b6b6b;
  --color-primary-700: #575757;
  --color-primary-800: #424242;
  --color-primary-900: #333333;
  --color-primary-950: #000000;

  /* Secondary Scale (Violet / Purple Fintech) */
  --color-secondary-50: #f5f1fe;
  --color-secondary-100: #ebe3fc;
  --color-secondary-200: #d0bff8;
  --color-secondary-300: #ac8bf9;
  --color-secondary-400: #8b5cf6;
  --color-secondary-500: #520df2;
  --color-secondary-600: #450bcb;
  --color-secondary-700: #3809a4;
  --color-secondary-800: #2b077e;
  --color-secondary-900: #230c5a;
  --color-secondary-950: #17083a;

  /* Accent Scale (Warm Amber / Gold) */
  --color-accent-50: #fef9f1;
  --color-accent-100: #fcf3e3;
  --color-accent-200: #f9e3be;
  --color-accent-300: #fad189;
  --color-accent-400: #fcb740;
  --color-accent-500: #f59e0b;
  --color-accent-600: #ce8508;
  --color-accent-700: #a76c07;
  --color-accent-800: #7f5305;
  --color-accent-900: #5b3e0b;
  --color-accent-950: #3b2807;

  /* Neutral Scale */
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #ebebeb;
  --color-neutral-200: #dedede;
  --color-neutral-300: #c7c7c7;
  --color-neutral-400: #ababab;
  --color-neutral-500: #898989;
  --color-neutral-600: #696969;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #333333;
  --color-neutral-900: #1b1b1b;
  --color-neutral-950: #070707;

  /* Semantic Intents */
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.10);
  --color-success-border: rgba(16, 185, 129, 0.22);
  
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.10);
  --color-warning-border: rgba(245, 158, 11, 0.22);

  --color-error: #f43f5e;
  --color-error-bg: rgba(244, 63, 94, 0.10);
  --color-error-border: rgba(244, 63, 94, 0.22);

  /* Typography — Plus Jakarta Sans for UI text, Inter / Geist for Numbers & Metrics */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tm-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tm-mono: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* Stealth Luxury Palette (Linear / Vercel / Institutional) */
  --tm-bg: #07080a;
  --tm-bg-elev: #0c0d10;
  --tm-card: #111215;
  --tm-card-2: #16171b;
  --tm-hover: #1c1d22;
  --tm-border: rgba(255, 255, 255, 0.08);
  --tm-border-2: rgba(255, 255, 255, 0.15);
  --tm-text: #ffffff;
  --tm-muted: #94a3b8;
  --tm-dim: #64748b;

  --tm-accent: #ffffff;
  --tm-accent-2: #18181b;
  --tm-green: #10b981;
  --tm-red: #f43f5e;
  --tm-amber: #f59e0b;
  --tm-purple: #a1a1aa;
  --tm-blue: #94a3b8;

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #09090b;
  --btn-primary-border: #ffffff;

  --background: 220 20% 3.5%;
  --foreground: 0 0% 100%;
  --card: 220 12% 7%;
  --card-foreground: 0 0% 100%;
  --popover: 220 12% 7%;
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 240 5.9% 6%;
  --secondary: 240 4% 10%;
  --secondary-foreground: 0 0% 100%;
  --muted: 240 4% 10%;
  --muted-foreground: 215 16% 65%;
  --accent: 240 4% 16%;
  --accent-foreground: 0 0% 100%;
  --destructive: 350 89% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 100% / 0.08;
  --input: 0 0% 100% / 0.12;
  --ring: 0 0% 100%;
  --radius: var(--radius-lg);
}

/* Light Theme Mode — Luxury Clean Aesthetics (Linear / Vercel / Stripe) */
[data-theme="light"],
html[data-theme="light"] {
  --tm-bg: #f8fafc;
  --tm-bg-elev: #ffffff;
  --tm-card: #ffffff;
  --tm-card-2: #f1f5f9;
  --tm-hover: #f1f5f9;
  --tm-border: rgba(15, 23, 42, 0.08);
  --tm-border-2: rgba(15, 23, 42, 0.14);
  --tm-text: #09090b;
  --tm-muted: #64748b;
  --tm-dim: #94a3b8;

  --tm-accent: #09090b;
  --tm-accent-2: #f1f5f9;
  --tm-green: #059669;
  --tm-red: #e11d48;
  --tm-amber: #d97706;
  --tm-purple: #4f46e5;
  --tm-blue: #2563eb;

  --btn-primary-bg: #09090b;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #09090b;

  --modal-bg: #ffffff;
  --modal-border: rgba(15, 23, 42, 0.12);
  --modal-backdrop: rgba(15, 23, 42, 0.45);

  --background: 210 40% 98%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
}