/* ============================================================
   TOKENS.CSS — Design Tokens & CSS Custom Properties
   ZaidAsim.com Premium Corporate Website
   ============================================================ */

:root {
  /* ── Color Palette: Dark Mode (Default) ───────────────── */
  --color-bg-primary:       #0a0a0a;
  --color-bg-secondary:     #111111;
  --color-bg-tertiary:      #181818;
  --color-bg-elevated:      #1a1a1a;
  --color-bg-surface:       rgba(17, 17, 17, 0.8);
  --color-bg-glass:         rgba(20, 20, 20, 0.7);
  --color-bg-glass-hover:   rgba(26, 26, 26, 0.85);
  --color-bg-overlay:       rgba(10, 10, 10, 0.95);

  /* ── Brand Colors (elvalabs inspired blue/violet/teal) ── */
  --color-accent-blue:      #0989d8;
  --color-accent-purple:    #6c3bff;
  --color-accent-teal:      #00d4aa;
  --color-accent-primary:   #0989d8;
  --color-accent-secondary: #6c3bff;

  /* ── Derived Brand Shades ─────────────────────────────── */
  --color-accent-blue-soft:    rgba(9, 137, 216, 0.1);
  --color-accent-purple-soft:  rgba(108, 59, 255, 0.1);
  --color-accent-teal-soft:    rgba(0, 212, 170, 0.1);
  --color-accent-blue-medium:  rgba(9, 137, 216, 0.25);
  --color-accent-purple-medium:rgba(108, 59, 255, 0.25);
  --color-accent-teal-medium:  rgba(0, 212, 170, 0.25);

  /* ── Text Colors ──────────────────────────────────────── */
  --color-text-primary:     #f5f5f5;
  --color-text-secondary:   rgba(255, 255, 255, 0.5);
  --color-text-tertiary:    rgba(255, 255, 255, 0.3);
  --color-text-muted:       rgba(255, 255, 255, 0.2);
  --color-text-accent:      #0989d8;
  --color-text-link:        #0989d8;
  --color-text-link-hover:  #00d4aa;

  /* ── Borders ──────────────────────────────────────────── */
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-border-hover:     rgba(255, 255, 255, 0.14);
  --color-border-accent:    rgba(9, 137, 216, 0.3);
  --color-border-focus:     rgba(9, 137, 216, 0.5);

  /* ── Gradients ────────────────────────────────────────── */
  --gradient-brand:         linear-gradient(135deg, #0989d8, #6c3bff);
  --gradient-brand-reverse: linear-gradient(315deg, #0989d8, #6c3bff);
  --gradient-brand-radial:  radial-gradient(ellipse at center, #6c3bff, #0989d8, #0a0a0a);
  --gradient-brand-soft:    linear-gradient(135deg, rgba(9,137,216,0.15), rgba(108,59,255,0.15));
  --gradient-brand-subtle:  linear-gradient(135deg, rgba(9,137,216,0.06), rgba(108,59,255,0.06));
  --gradient-hero-bg:       radial-gradient(ellipse 80% 60% at 50% 0%, rgba(9,137,216,0.1) 0%, rgba(108,59,255,0.04) 40%, transparent 70%);
  --gradient-card-shine:    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%, rgba(255,255,255,0.01) 100%);
  --gradient-text:          linear-gradient(135deg, #0989d8, #6c3bff);
  --gradient-bg-mesh:       radial-gradient(at 20% 80%, rgba(9,137,216,0.04) 0%, transparent 50%),
                            radial-gradient(at 80% 20%, rgba(108,59,255,0.04) 0%, transparent 50%),
                            radial-gradient(at 50% 50%, rgba(0,212,170,0.03) 0%, transparent 60%);
  --gradient-section-fade:  linear-gradient(180deg, transparent, var(--color-bg-primary) 90%);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:              0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-glow-purple:     0 0 30px rgba(108, 59, 255, 0.2);
  --shadow-glow-magenta:    0 0 30px rgba(0, 212, 170, 0.2);
  --shadow-glow-blue:       0 0 30px rgba(9, 137, 216, 0.2);
  --shadow-glow-brand:      0 0 40px rgba(9, 137, 216, 0.15), 0 0 80px rgba(108, 59, 255, 0.08);
  --shadow-glow-hover:      0 0 50px rgba(9, 137, 216, 0.25), 0 0 100px rgba(108, 59, 255, 0.1);
  --shadow-retro:           4px 4px 0px var(--color-accent-purple);
  --shadow-retro-magenta:   4px 4px 0px var(--color-accent-teal);
  --shadow-retro-blue:      4px 4px 0px var(--color-accent-blue);
  --shadow-inset-glow:      inset 0 0 30px rgba(9, 137, 216, 0.05);

  /* ── Typography ───────────────────────────────────────── */
  --font-primary:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:           'Space Grotesk', 'Inter', sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-md:           1.125rem;   /* 18px */
  --font-size-lg:           1.25rem;    /* 20px */
  --font-size-xl:           1.5rem;     /* 24px */
  --font-size-2xl:          2rem;       /* 32px */
  --font-size-3xl:          2.5rem;     /* 40px */
  --font-size-4xl:          3rem;       /* 48px */
  --font-size-5xl:          3.75rem;    /* 60px */
  --font-size-6xl:          4.5rem;     /* 72px */
  --font-size-hero:         clamp(3.5rem, 8vw, 6.5rem);
  --font-size-section:      clamp(2.5rem, 5vw, 4.5rem);

  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  --line-height-tight:      1.05;
  --line-height-snug:       1.2;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.7;
  --line-height-loose:      2;

  --letter-spacing-tight:  -0.04em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.2em;

  /* ── Spacing Scale ────────────────────────────────────── */
  --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 */
  --space-section: clamp(6rem, 12vh, 10rem);

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

  /* ── Motion / Easing ──────────────────────────────────── */
  --ease-smooth:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:     cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:     cubic-bezier(0.4, 0, 1, 1);

  --duration-instant:  100ms;
  --duration-fast:     200ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   700ms;
  --duration-slowest:  1000ms;

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-negative:    -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-tooltip:      700;
  --z-hud:          800;
  --z-cursor:       9999;

  /* ── Glassmorphism Tokens ─────────────────────────────── */
  --glass-blur:             blur(16px);
  --glass-blur-heavy:       blur(32px);
  --glass-blur-light:       blur(8px);
  --glass-bg:               rgba(20, 20, 20, 0.7);
  --glass-bg-hover:         rgba(26, 26, 26, 0.85);
  --glass-border:           1px solid rgba(255, 255, 255, 0.08);

  /* ── Container Widths ─────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;
  --container-full: 100%;

  /* ── Misc ─────────────────────────────────────────────── */
  --nav-height:     72px;
  --scrollbar-width: 8px;
  --cursor-size:    20px;
}

/* ============================================================
   LIGHT MODE OVERRIDES (Muted elegant light theme)
   ============================================================ */
[data-theme="light"] {
  --color-bg-primary:       #fcfcfc;
  --color-bg-secondary:     #f5f5f7;
  --color-bg-tertiary:      #eeeef2;
  --color-bg-elevated:      #ffffff;
  --color-bg-surface:       rgba(245, 245, 247, 0.8);
  --color-bg-glass:         rgba(255, 255, 255, 0.75);
  --color-bg-glass-hover:   rgba(255, 255, 255, 0.9);
  --color-bg-overlay:       rgba(252, 252, 252, 0.95);

  --color-accent-blue:      #0572b8;
  --color-accent-purple:    #552cd8;
  --color-accent-teal:      #00b08b;
  --color-accent-primary:   #0572b8;
  --color-accent-secondary: #552cd8;

  --color-accent-blue-soft:    rgba(5, 114, 184, 0.08);
  --color-accent-purple-soft:  rgba(85, 44, 216, 0.08);
  --color-accent-teal-soft:    rgba(0, 176, 139, 0.08);
  --color-accent-blue-medium:  rgba(5, 114, 184, 0.18);
  --color-accent-purple-medium:rgba(85, 44, 216, 0.18);
  --color-accent-teal-medium:  rgba(0, 176, 139, 0.18);

  --color-text-primary:     #121212;
  --color-text-secondary:   rgba(0, 0, 0, 0.55);
  --color-text-tertiary:    rgba(0, 0, 0, 0.35);
  --color-text-muted:       rgba(0, 0, 0, 0.15);
  --color-text-accent:      #0572b8;
  --color-text-link:        #0572b8;
  --color-text-link-hover:  #00b08b;

  --color-border:           rgba(0, 0, 0, 0.08);
  --color-border-hover:     rgba(0, 0, 0, 0.14);
  --color-border-accent:    rgba(5, 114, 184, 0.3);
  --color-border-focus:     rgba(5, 114, 184, 0.5);

  --gradient-brand:         linear-gradient(135deg, #0572b8, #552cd8);
  --gradient-brand-reverse: linear-gradient(315deg, #0572b8, #552cd8);
  --gradient-brand-soft:    linear-gradient(135deg, rgba(5,114,184,0.1), rgba(85,44,216,0.1));
  --gradient-brand-subtle:  linear-gradient(135deg, rgba(5,114,184,0.04), rgba(85,44,216,0.04));
  --gradient-hero-bg:       radial-gradient(ellipse 80% 60% at 50% 0%, rgba(5,114,184,0.08) 0%, rgba(85,44,216,0.04) 40%, transparent 70%);
  --gradient-card-shine:    linear-gradient(135deg, rgba(255,255,255,0.8) 0%, transparent 50%, rgba(255,255,255,0.4) 100%);
  --gradient-text:          linear-gradient(135deg, #0572b8, #552cd8);
  --gradient-bg-mesh:       radial-gradient(at 20% 80%, rgba(5,114,184,0.04) 0%, transparent 50%),
                            radial-gradient(at 80% 20%, rgba(0,176,139,0.04) 0%, transparent 50%);

  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:              0 16px 48px rgba(0, 0, 0, 0.1);
  --shadow-glow-purple:     0 0 30px rgba(85, 44, 216, 0.15);
  --shadow-glow-magenta:    0 0 30px rgba(0, 176, 139, 0.15);
  --shadow-glow-blue:       0 0 30px rgba(5, 114, 184, 0.15);
  --shadow-glow-brand:      0 0 40px rgba(5, 114, 184, 0.12);
  --shadow-glow-hover:      0 0 50px rgba(5, 114, 184, 0.18);
  --shadow-retro:           4px 4px 0px var(--color-accent-purple);
  --shadow-retro-magenta:   4px 4px 0px var(--color-accent-teal);
  --shadow-retro-blue:      4px 4px 0px var(--color-accent-blue);
  --shadow-inset-glow:      inset 0 0 30px rgba(5, 114, 184, 0.05);

  --glass-bg:               rgba(255, 255, 255, 0.75);
  --glass-bg-hover:         rgba(255, 255, 255, 0.9);
  --glass-border:           1px solid rgba(0, 0, 0, 0.08);
}