/* ============================================================
   WEBLUX Design Tokens — variables.css
   Premium Software Company Design System
   ============================================================ */

:root {
  /* ── Color System ────────────────────────────────── */

  /* Primary — Dark Navy */
  --color-navy-950: #050810;
  --color-navy-900: #0a0f1c;
  --color-navy-800: #0d1321;
  --color-navy-700: #111827;
  --color-navy-600: #141b2d;
  --color-navy-500: #1a2332;
  --color-navy-400: #243044;
  --color-navy-300: #334155;
  --color-navy-200: #475569;

  /* Accent — Gold */
  --color-gold-50:  #fdf8e8;
  --color-gold-100: #faefc6;
  --color-gold-200: #f5e08a;
  --color-gold-300: #eac94e;
  --color-gold-400: #d4af37;
  --color-gold-500: #c9a84c;
  --color-gold-600: #b8952f;
  --color-gold-700: #9a7b25;
  --color-gold-800: #7d6320;
  --color-gold-900: #65501d;

  /* Neutral — Whites & Grays */
  --color-white:    #ffffff;
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;

  /* Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* ── Mapped Colors ───────────────────────────────── */
  --bg-primary:    var(--color-navy-900);
  --bg-secondary:  var(--color-navy-800);
  --bg-tertiary:   var(--color-navy-700);
  --bg-elevated:   var(--color-navy-600);
  --bg-surface:    rgba(255, 255, 255, 0.03);
  --bg-glass:      rgba(13, 19, 33, 0.72);
  --bg-glass-light: rgba(255, 255, 255, 0.04);

  --text-primary:   var(--color-white);
  --text-secondary: var(--color-gray-300);
  --text-tertiary:  var(--color-gray-400);
  --text-muted:     var(--color-gray-500);
  --text-accent:    var(--color-gold-400);

  --border-default: rgba(255, 255, 255, 0.06);
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-hover:   rgba(255, 255, 255, 0.12);
  --border-gold:    rgba(212, 175, 55, 0.3);

  /* ── Typography ──────────────────────────────────── */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Fluid clamp scale */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);     /* 11-12px */
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);    /* 13-14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);         /* 15-16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);       /* 17-18px */
  --text-xl:   clamp(1.1875rem, 1.1rem + 0.35vw, 1.25rem);      /* 19-20px */
  --text-2xl:  clamp(1.4375rem, 1.3rem + 0.5vw, 1.5rem);        /* 23-24px */
  --text-3xl:  clamp(1.75rem, 1.5rem + 0.8vw, 1.875rem);        /* 28-30px */
  --text-4xl:  clamp(2.1875rem, 1.8rem + 1.2vw, 2.5rem);        /* 35-40px */
  --text-5xl:  clamp(2.75rem, 2.2rem + 1.8vw, 3.25rem);         /* 44-52px */
  --text-6xl:  clamp(3.25rem, 2.5rem + 2.5vw, 4rem);            /* 52-64px */
  --text-7xl:  clamp(3.75rem, 2.8rem + 3.2vw, 5rem);            /* 60-80px */

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter Spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing ─────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* Section Spacing */
  --section-gap:     clamp(5rem, 8vw, 10rem);
  --section-gap-sm:  clamp(3rem, 5vw, 6rem);

  /* ── Border Radius ───────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-2xl:     0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow-glow:    0 0 40px rgba(212, 175, 55, 0.15);
  --shadow-glow-sm: 0 0 20px rgba(212, 175, 55, 0.1);
  --shadow-inner:   inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(212, 175, 55, 0.08);

  /* ── Transitions ─────────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
  --duration-slowest: 1000ms;

  --transition-base:  all var(--duration-normal) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);
  --transition-color: color var(--duration-normal) var(--ease-out),
                      background-color var(--duration-normal) var(--ease-out),
                      border-color var(--duration-normal) var(--ease-out);

  /* ── Z-Index ─────────────────────────────────────── */
  --z-below:     -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-popover:   500;
  --z-toast:     600;
  --z-cursor:    700;
  --z-preloader: 9999;

  /* ── Container ───────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ── Glassmorphism ───────────────────────────────── */
  --glass-bg:      rgba(13, 19, 33, 0.65);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-blur:    20px;
  --glass-bg-light: rgba(255, 255, 255, 0.03);
}