/* ============================================================
   Levitass AI — Design Tokens (Enhanced)
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-bg-primary:    #050510;
  --color-bg-secondary:  #0a0a1a;
  --color-bg-tertiary:   #12122a;
  --color-bg-card:       rgba(255, 255, 255, 0.03);
  --color-bg-glass:      rgba(255, 255, 255, 0.05);

  --color-text-primary:   #f0f0f5;
  --color-text-secondary: #a0a0b8;
  --color-text-muted:     #6a6a80;
  --color-text-inverse:   #0a0a0f;

  /* Enhanced accent colors - more vivid */
  --color-accent-start:   #7c6bff;
  --color-accent-mid:     #a855f7;
  --color-accent-end:     #06b6d4;
  --color-accent-pink:    #ec4899;
  --color-accent-gradient: linear-gradient(135deg, var(--color-accent-start), var(--color-accent-mid), var(--color-accent-end));
  --color-accent-gradient-hover: linear-gradient(135deg, #8d7eff, #b76bff, #22d3ee);
  --color-accent-gradient-vivid: linear-gradient(135deg, #7c6bff, #ec4899, #06b6d4);

  --color-success:  #00d68f;
  --color-warning:  #ffaa00;
  --color-error:    #ff4060;

  --color-border:        rgba(255, 255, 255, 0.06);
  --color-border-hover:  rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(124, 107, 255, 0.3);

  /* ── Typography ── */
  --font-family-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-ja: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-family-base: var(--font-family-ja);

  --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-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* ── Spacing ── */
  --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;

  --section-padding: clamp(4rem, 8vw, 7rem);

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

  /* ── Shadows (Enhanced with color) ── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(124, 107, 255, 0.2);
  --shadow-glow-pink: 0 0 40px rgba(236, 72, 153, 0.15);
  --shadow-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.15);

  /* ── Glass Effect ── */
  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index Scale ── */
  --z-below:     -1;
  --z-base:      0;
  --z-above:     1;
  --z-sticky:    100;
  --z-nav:       200;
  --z-modal:     300;
  --z-overlay:   400;
  --z-toast:     500;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-sm:   720px;
  --nav-height:     72px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-base:   0ms;
    --transition-slow:   0ms;
    --transition-spring: 0ms;
  }
}