/**
 * LingFitPro Design Tokens - CSS Custom Properties
 *
 * Import this file in your app's global CSS:
 * @import '@lingfitpro/design-tokens/tokens.css';
 *
 * Or copy the :root block into your existing stylesheet.
 */

:root {
  /* ==========================================================================
     Colors - Primary
     ========================================================================== */

  /* Dark Navy - foundation color */
  --color-navy-900: #1F2937;
  --color-navy-950: #111827;

  /* Electric Blue - main action color */
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;

  /* Vibrant Yellow - progress, achievements */
  --color-yellow-300: #FDE047;
  --color-yellow-400: #FACC15;
  --color-yellow-500: #EAB308;

  /* ==========================================================================
     Colors - Neutrals
     ========================================================================== */

  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* ==========================================================================
     Colors - Extended
     ========================================================================== */

  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-900: #0F172A;

  --color-indigo-50: #EEF2FF;
  --color-indigo-100: #E0E7FF;
  --color-indigo-200: #CBD5F5;
  --color-indigo-400: #818CF8;
  --color-indigo-500: #6366F1;
  --color-indigo-600: #4F46E5;
  --color-indigo-700: #4338CA;
  --color-indigo-800: #3730A3;

  --color-ice-50: #F3F6FF;
  --color-ice-100: #F7F8FF;
  --color-ice-200: #F7F9FF;
  --color-ice-300: #F8F9FF;
  --color-ice-400: #F8FAFF;
  --color-ice-500: #FAFBFF;

  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;

  --color-rose-50: #FFF1F2;
  --color-rose-200: #FECDD3;
  --color-rose-800: #9B1C31;

  --color-amber-50: #FFFBEB;
  --color-amber-200: #FDE68A;
  --color-amber-300: #FCD34D;
  --color-amber-500: #F59E0B;
  --color-gold-700: #C57B00;
  --color-amber-800: #92400E;

  --color-green-50: #F0FDF4;
  --color-green-300: #86EFAC;
  --color-green-500: #22C55E;
  --color-green-800: #166534;

  --color-emerald-800: #0B6B4A;

  /* ==========================================================================
     Colors - Alpha
     ========================================================================== */

  --color-blue-500-12: rgba(59, 130, 246, 0.12);
  --color-blue-500-20: rgba(59, 130, 246, 0.2);
  --color-blue-500-40: rgba(59, 130, 246, 0.4);
  --color-blue-500-60: rgba(59, 130, 246, 0.6);
  --color-white-60: rgba(255, 255, 255, 0.6);

  /* ==========================================================================
     Colors - Status
     ========================================================================== */

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #06B6D4;

  /* ==========================================================================
     Colors - Semantic (Dark Mode First)
     ========================================================================== */

  --bg-primary: var(--color-navy-950);
  --bg-secondary: var(--color-navy-900);
  --bg-elevated: rgba(16, 26, 50, 0.78);
  --bg-elevated-strong: rgba(18, 32, 60, 0.92);

  --text-primary: var(--color-white);
  --text-secondary: var(--color-gray-400);
  --text-muted: var(--color-gray-500);

  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);

  --action-primary: var(--color-blue-500);
  --action-primary-hover: var(--color-blue-600);
  --action-secondary: var(--color-yellow-400);

  /* ==========================================================================
     Typography
     ========================================================================== */

  --font-sans: 'Inter', 'Poppins', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'SFMono-Regular', 'Liberation Mono', Menlo, Consolas, monospace;

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

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

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-label: 0.08em;
  --tracking-caps: 0.12em;

  /* ==========================================================================
     Spacing
     ========================================================================== */

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ==========================================================================
     Border Radius
     ========================================================================== */

  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */

  --shadow-soft: 0px 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-md: 0px 6px 16px rgba(0, 0, 0, 0.15);
  --shadow-lift: 0px 6px 20px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0px 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0px 16px 40px rgba(15, 23, 42, 0.08);
  --shadow-panel: 0px 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-bubble: 0px 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-panel-soft: 0px 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-blue-glow: 0px 6px 16px rgba(59, 130, 246, 0.35);
  --shadow-blue-hover: 0px 2px 8px rgba(59, 130, 246, 0.4);
  --shadow-indigo-glow: 0px 6px 16px rgba(79, 70, 229, 0.3);
  --shadow-yellow-glow: 0px 12px 24px rgba(244, 184, 96, 0.2);
  --shadow-success-glow: 0 0 0 4px rgba(71, 214, 164, 0.2);
  --shadow-error-glow: 0 0 0 4px rgba(255, 96, 96, 0.2);

  /* ==========================================================================
     Z-Index
     ========================================================================== */

  --z-behind: -1;
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;

  /* ==========================================================================
     Transitions
     ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-micro: 100ms ease-out;
  --transition-page: 400ms ease-in-out;

  /* ==========================================================================
     Layout
     ========================================================================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  --size-header-height: 70px;
  --size-logo-header: 40px;
  --size-logo-footer: 64px;
}

/* ==========================================================================
   Light Mode Overrides
   ========================================================================== */

[data-theme="light"],
.theme-light {
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-elevated: var(--color-white);
  --bg-elevated-strong: var(--color-gray-50);

  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-500);

  --border-default: var(--color-gray-200);
  --border-subtle: var(--color-gray-100);
}

/* ==========================================================================
   Accent Color Presets (for admin panels)
   ========================================================================== */

[data-accent="amber"] {
  --accent: #f4b860;
  --accent-strong: #ff8a5b;
  --accent-soft: rgba(244, 184, 96, 0.2);
}