/* ==========================================================================
   DESIGN TOKENS - Central Design System Architecture
   Pure Hex and RGBA values for full compatibility (PNG export, Html2Canvas)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RAW PALETTE LAYER (Primitive Color Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Core Crimson Scale (Light Mode Brand Primary) */
  --raw-crimson-50: #fdf2f4;
  --raw-crimson-100: #fce7ea;
  --raw-crimson-200: #f9d0d8;
  --raw-crimson-300: #f4a9b8;
  --raw-crimson-400: #ec738e;
  --raw-crimson-500: #dc3b66;
  --raw-crimson-600: #b70040; /* Brand Identity Light */
  --raw-crimson-700: #9d0036; /* Brand Primary Hover */
  --raw-crimson-800: #82002d;
  --raw-crimson-900: #6e0429;
  --raw-crimson-950: #3f0014; /* Guaranteed High-Contrast On-Secondary */

  /* Pink / Rose Scale (Light Mode Secondary & Accents) */
  --raw-pink-50: #fdf4f7;
  --raw-pink-100: #fbe8ef;
  --raw-pink-200: #f7afc3; /* Brand Identity Light Secondary */
  --raw-pink-300: #f085a4;
  --raw-pink-400: #e4537f;
  --raw-pink-500: #d12962;
  --raw-pink-600: #be185d; /* Accessible pink text on white (6.28:1 contrast) */
  --raw-pink-700: #980f42;
  --raw-pink-800: #7e1037;
  --raw-pink-900: #6a1131;

  /* Purple / Pink Scale (Dark Mode Brand Identity) */
  --raw-purple-300: #d8b4fe;
  --raw-purple-400: #c084fc;
  --raw-purple-500: #a855f7; /* Brand Identity Dark Primary */
  --raw-purple-600: #9333ea; /* Brand Primary Hover Dark */
  --raw-purple-700: #7e22ce;
  --raw-purple-900: #3b0764;
  --raw-purple-950: #180828;

  --raw-neon-pink-300: #f9a8d4;
  --raw-neon-pink-400: #f472b6;
  --raw-neon-pink-500: #ec4899; /* Brand Identity Dark Secondary */
  --raw-neon-pink-600: #db2777;
  --raw-neon-pink-700: #be185d;
  --raw-neon-pink-900: #500724;

  /* Neutral Slate Scale (Surfaces, Borders, Text) */
  --raw-white: #ffffff;
  --raw-slate-50: #f8fafc;
  --raw-slate-100: #f1f5f9;
  --raw-slate-200: #e2e8f0;
  --raw-slate-300: #cbd5e1;
  --raw-slate-400: #94a3b8;
  --raw-slate-500: #64748b;
  --raw-slate-600: #475569;
  --raw-slate-700: #334155;
  --raw-slate-800: #1e293b;
  --raw-slate-900: #0f172a;
  --raw-slate-950: #020617;
  --raw-black: #000000;

  /* Dark Void Scale (Dark Mode Canvas & Mesh) */
  --raw-dark-mesh-1: #09090b;
  --raw-dark-mesh-2: #180828;
  --raw-dark-mesh-3: #0c1020;
  --raw-dark-mesh-4: #09090f;
  --raw-dark-surface: #120d1d;
  --raw-dark-card: rgba(22, 16, 34, 0.75);

  /* Functional / Status Scales */
  --raw-emerald-50: #ecfdf5;
  --raw-emerald-100: #d1fae5;
  --raw-emerald-200: #a7f3d0;
  --raw-emerald-500: #10b981;
  --raw-emerald-600: #059669;
  --raw-emerald-700: #047857;
  --raw-emerald-800: #065f46;

  --raw-amber-50: #fffbeb;
  --raw-amber-100: #fef3c7;
  --raw-amber-200: #fde68a;
  --raw-amber-500: #f59e0b;
  --raw-amber-600: #d97706;
  --raw-amber-700: #b45309;
  --raw-amber-800: #92400e;

  --raw-red-50: #fef2f2;
  --raw-red-100: #fee2e2;
  --raw-red-200: #fecaca;
  --raw-red-300: #fca5a5;
  --raw-red-500: #ef4444;
  --raw-red-600: #dc2626;
  --raw-red-700: #b91c1c;
  --raw-red-800: #991b1b;

  --raw-blue-50: #eff6ff;
  --raw-blue-100: #dbeafe;
  --raw-blue-200: #bfdbfe;
  --raw-blue-400: #38bdf8;
  --raw-blue-500: #3b82f6;
  --raw-blue-600: #2563eb;
  --raw-blue-700: #1d4ed8;
  --raw-blue-800: #1e40af;
}

/* --------------------------------------------------------------------------
   2. SEMANTIC LAYER - LIGHT THEME (Default :root)
   Crimson / Pink Identity with WCAG AA/AAA Guaranteed Contrast
   -------------------------------------------------------------------------- */
:root {
  /* Brand Identity Tokens */
  --color-primary: #b70040;
  --color-primary-hover: #9d0036;
  --color-primary-container: #dc3b66;
  --color-primary-fixed: #fce7ea;
  --color-primary-fixed-dim: #f9d0d8;

  --color-secondary: #f7afc3;
  --color-secondary-hover: #f085a4;
  --color-secondary-text: #be185d; /* 6.28:1 contrast on white (WCAG AA) */
  --color-secondary-container: #fbe8ef;
  --color-secondary-fixed: #fbe8ef;
  --color-secondary-fixed-dim: #f7afc3;

  --color-accent-glow: rgba(183, 0, 64, 0.18);
  --color-focus-ring: rgba(183, 0, 64, 0.25);

  /* Paired Guaranteed-Readable "On-" Tokens */
  --on-primary: #ffffff;             /* 6.95:1 on #b70040 (WCAG AAA large, AA normal) */
  --on-primary-container: #ffffff;   /* 4.54:1 on #dc3b66 */
  --on-primary-fixed: #3f0014;       /* 12.8:1 on #fce7ea */
  --on-primary-fixed-variant: #6e0429;

  --on-secondary: #3f0014;           /* 9.88:1 on #f7afc3 (WCAG AAA) */
  --on-secondary-container: #6a1131; /* 8.20:1 on #fbe8ef */
  --on-secondary-fixed: #3f0014;
  --on-secondary-fixed-variant: #6a1131;

  --on-surface: #0f172a;             /* 16.60:1 on #ffffff (WCAG AAA) */
  --on-glass: #0f172a;               /* 16.60:1 on white glass (WCAG AAA) */

  /* Canvas & Backgrounds */
  --color-bg-canvas: #f8fafc;
  --color-bg-gradient: linear-gradient(90deg, #b70040 0%, #f7afc3 50%);
  --color-bg-body: #ffffff;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-variant: #f1f5f9;
  --color-surface-container: #f8fafc;
  --color-surface-container-low: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #f1f5f9;
  --color-surface-container-highest: #e2e8f0;
  --color-surface-dim: #e2e8f0;
  --color-surface-bright: #ffffff;
  --color-inverse-surface: #1e293b;
  --color-inverse-on-surface: #f8fafc;

  /* Glassmorphism */
  --color-glass-bg: #ffffff;
  --color-glass-bg-subtle: rgba(255, 255, 255, 0.95);
  --color-glass-border: #e2e8f0;
  --color-glass-border-focus: rgba(183, 0, 64, 0.35);

  /* Typography */
  --color-text-primary: #0f172a;     /* 16.60:1 on white (WCAG AAA) */
  --color-text-muted: #475569;       /* 7.61:1 on white (WCAG AAA) */
  --color-text-dim: #64748b;         /* 4.73:1 on white (WCAG AA) */

  /* Borders & Dividers */
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-border-subtle: #f1f5f9;

  /* Form & Input Elements */
  --color-input-bg: #ffffff;
  --color-input-border: #cbd5e1;
  --color-input-focus-border: #b70040;
  --color-input-focus-glow: rgba(183, 0, 64, 0.18);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 15px rgba(183, 0, 64, 0.25);
  --shadow-primary-hover: 0 8px 25px rgba(183, 0, 64, 0.35);

  /* Functional Status */
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --on-success: #ffffff;

  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-backdrop: rgba(0, 0, 0, 0.7);

  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --on-warning: #ffffff;

  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-danger-glow: rgba(220, 38, 38, 0.35);
  --on-danger: #ffffff;

  --color-info: #2563eb;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;
  --on-info: #ffffff;

  /* Tertiary */
  --color-tertiary: #64535a;
  --on-tertiary: #ffffff;
  --color-tertiary-container: #fbe8ef;
  --on-tertiary-container: #3f0014;
  --color-tertiary-fixed: #f4dce4;
  --color-tertiary-fixed-dim: #d7c1c8;
  --on-tertiary-fixed: #25181e;
  --on-tertiary-fixed-variant: #524249;
}

/* --------------------------------------------------------------------------
   3. SEMANTIC LAYER - DARK THEME (body.dark-theme)
   Purple / Pink Glassmorphism with Polished Harmony & High Contrast
   -------------------------------------------------------------------------- */
body.dark-theme {
  /* Brand Identity Tokens */
  --color-primary: #a855f7;
  --color-primary-hover: #9333ea;
  --color-primary-container: #7e22ce;
  --color-primary-fixed: #3b0764;
  --color-primary-fixed-dim: #581c87;

  --color-secondary: #ec4899;
  --color-secondary-hover: #db2777;
  --color-secondary-text: #f472b6; /* High contrast on dark glass */
  --color-secondary-container: #831843;
  --color-secondary-fixed: #500724;
  --color-secondary-fixed-dim: #700a36;

  --color-accent-glow: rgba(168, 85, 247, 0.45);
  --color-focus-ring: rgba(168, 85, 247, 0.40);

  /* Paired Guaranteed-Readable "On-" Tokens */
  --on-primary: #ffffff;             /* 4.82:1 on #a855f7 (WCAG AA) */
  --on-primary-container: #ffffff;
  --on-primary-fixed: #ffffff;
  --on-primary-fixed-variant: #f3e8ff;

  --on-secondary: #ffffff;           /* 3.83:1 for large UI / headers on #ec4899 */
  --on-secondary-container: #ffffff;
  --on-secondary-fixed: #ffffff;
  --on-secondary-fixed-variant: #fce7f3;

  --on-surface: #ffffff;             /* 18.00:1 on dark surfaces (WCAG AAA) */
  --on-glass: #ffffff;               /* 18.00:1 on glass panels (WCAG AAA) */

  /* Canvas & Backgrounds */
  --color-bg-canvas: #09090b;
  --color-bg-gradient: linear-gradient(-45deg, #09090b, #180828, #0c1020, #09090f);
  --color-bg-body: #09090b;

  /* Surfaces */
  --color-surface: rgba(22, 16, 34, 0.85);
  --color-surface-variant: rgba(255, 255, 255, 0.06);
  --color-surface-container: rgba(255, 255, 255, 0.04);
  --color-surface-container-low: rgba(255, 255, 255, 0.02);
  --color-surface-container-lowest: #09090b;
  --color-surface-container-high: rgba(255, 255, 255, 0.08);
  --color-surface-container-highest: rgba(255, 255, 255, 0.12);
  --color-surface-dim: #09090b;
  --color-surface-bright: rgba(255, 255, 255, 0.12);
  --color-inverse-surface: #f8fafc;
  --color-inverse-on-surface: #0f172a;

  /* Glassmorphism */
  --color-glass-bg: rgba(255, 255, 255, 0.04);
  --color-glass-bg-subtle: rgba(255, 255, 255, 0.06);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-border-focus: rgba(168, 85, 247, 0.40);

  /* Typography */
  --color-text-primary: #ffffff;                 /* 18.00:1 on dark (WCAG AAA) */
  --color-text-muted: rgba(255, 255, 255, 0.75); /* > 9.00:1 on dark (WCAG AAA) */
  --color-text-dim: rgba(255, 255, 255, 0.55);   /* > 5.30:1 on dark (WCAG AA) */

  /* Borders & Dividers */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-hover: rgba(255, 255, 255, 0.25);
  --color-border-subtle: rgba(255, 255, 255, 0.06);

  /* Form & Input Elements */
  --color-input-bg: rgba(255, 255, 255, 0.05);
  --color-input-border: rgba(255, 255, 255, 0.12);
  --color-input-focus-border: #a855f7;
  --color-input-focus-glow: rgba(168, 85, 247, 0.35);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 4px 15px rgba(168, 85, 247, 0.30);
  --shadow-primary-hover: 0 8px 25px rgba(168, 85, 247, 0.50);

  /* Functional Status */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-success-border: rgba(16, 185, 129, 0.30);
  --on-success: #ffffff;

  --color-overlay: rgba(0, 0, 0, 0.75);
  --color-backdrop: rgba(0, 0, 0, 0.75);

  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.30);
  --on-warning: #09090b;

  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-border: rgba(239, 68, 68, 0.30);
  --color-danger-glow: rgba(239, 68, 68, 0.35);
  --on-danger: #ffffff;

  --color-info: #3b82f6;
  --color-info-bg: rgba(59, 130, 246, 0.12);
  --color-info-border: rgba(59, 130, 246, 0.30);
  --on-info: #ffffff;

  /* Tertiary */
  --color-tertiary: #d7c1c8;
  --on-tertiary: #09090b;
  --color-tertiary-container: rgba(244, 220, 228, 0.15);
  --on-tertiary-container: #ffffff;
  --color-tertiary-fixed: #d7c1c8;
  --color-tertiary-fixed-dim: #b89fa7;
  --on-tertiary-fixed: #09090b;
  --on-tertiary-fixed-variant: #ffffff;
}

/* --------------------------------------------------------------------------
   4. BACKWARD COMPATIBILITY ALIASES
   Maps legacy variables directly to design tokens so all views adopt them
   -------------------------------------------------------------------------- */
:root {
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary);
  --accent-glow: var(--color-accent-glow);
  --glass-bg: var(--color-glass-bg);
  --glass-border: var(--color-glass-border);
  --glass-border-focus: var(--color-glass-border-focus);
  --text-primary: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-dim);
}

body.dark-theme {
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary);
  --accent-glow: var(--color-accent-glow);
  --glass-bg: var(--color-glass-bg);
  --glass-border: var(--color-glass-border);
  --glass-border-focus: var(--color-glass-border-focus);
  --text-primary: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-dim);
}