/* ============================================================
   TheAdvantis — Design Tokens (tokens.css)
   Brand: Premium Digital Agency | Palette: Deep Violet + Electric Indigo
   ============================================================ */

:root {
  /* ── Primary Color (Deep Navy) ── */
  --color-primary-h: 222;
  --color-primary-s: 65%;
  --color-primary-l: 25%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h), var(--color-primary-s), 40%);
  --color-primary-dark: hsl(var(--color-primary-h), var(--color-primary-s), 15%);
  --color-primary-subtle: hsl(var(--color-primary-h), var(--color-primary-s), 96%);
  --color-primary-glow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.35);

  /* ── Secondary Color (Premium Gold) ── */
  --color-secondary-h: 43;
  --color-secondary: hsl(var(--color-secondary-h), 85%, 52%);
  --color-secondary-dark: hsl(var(--color-secondary-h), 85%, 40%);

  /* ── Accent Color (Champagne Gold) ── */
  --color-accent-h: 35;
  --color-accent: hsl(var(--color-accent-h), 60%, 60%);
  --color-accent-subtle: hsla(var(--color-accent-h), 60%, 60%, 0.12);

  /* ── Neutral / Text ── */
  --color-bg: hsl(220, 25%, 97%);
  --color-bg-alt: hsl(220, 20%, 93%);
  --color-surface: hsl(0, 0%, 100%);
  --color-text: hsl(222, 30%, 14%);
  --color-text-muted: hsl(220, 12%, 52%);
  --color-text-inverse: hsl(0, 0%, 98%);
  --color-border: hsl(220, 18%, 88%);
  --color-border-light: hsl(220, 15%, 93%);

  /* ── Dark Mode Colors ── */
  --color-bg-dark: hsl(228, 28%, 7%);
  --color-bg-alt-dark: hsl(226, 24%, 10%);
  --color-surface-dark: hsl(226, 22%, 13%);
  --color-text-dark: hsl(0, 0%, 95%);
  --color-text-muted-dark: hsl(220, 12%, 62%);
  --color-border-dark: hsl(222, 20%, 20%);

  /* ── Typography ── */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --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:  2rem;
  --font-size-4xl:  2.75rem;
  --font-size-5xl:  3.5rem;
  --font-size-6xl:  4.5rem;

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

  --line-height-tight:   1.15;
  --line-height-base:    1.7;
  --line-height-relaxed: 1.9;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide:  0.06em;

  /* ── Spacing Scale ── */
  --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;
  --space-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 20px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-2xl: 0 30px 60px rgba(0,0,0,0.18);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
  --shadow-primary: 0 8px 28px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.38);
  --shadow-primary-lg: 0 16px 48px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.45);

  /* ── Easing Curves ── */
  --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);

  /* ── Durations ── */
  --duration-fast:   150ms;
  --duration-base:   260ms;
  --duration-slow:   420ms;
  --duration-slower: 650ms;

  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ── Z-Index Scale ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    500;
  --z-tooltip:  600;

  /* ── Container Widths ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}