/* ===========================================================================
   EDITAKU — Design system tokens
   ---------------------------------------------------------------------------
   Source of truth for the whole site. Studio + landing both consume these.
   Update a token here → every page picks it up.
   =========================================================================== */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --bg:           #06060f;   /* page bg — cosmic black */
  --bg-elev-1:   #0a0a18;   /* sections */
  --bg-elev-2:   #0f0f1f;   /* cards */
  --bg-elev-3:   #15152a;   /* card hover, raised */
  --bg-overlay:   rgba(6, 6, 15, 0.72);

  /* Hairline borders. Subtle by default, "strong" for focused/active. */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(96, 165, 250, 0.40);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text:        #f5f6ff;
  --text-soft:   #b4b8d6;
  --text-muted:  #7a809e;
  --text-on-accent: #ffffff;

  /* ── Brand accents ───────────────────────────────────────────────────── */
  /* Primary (electric blue): used on most CTAs, focus rings, links. */
  --accent:        #3b82f6;
  --accent-bright: #60a5fa;
  --accent-dim:    #2563eb;
  --accent-soft:   rgba(59, 130, 246, 0.18);
  --accent-strong: rgba(59, 130, 246, 0.45);

  /* "Viral" gradient — reserved for the top-line CTA + brand wordmark.
     Used sparingly so it keeps signal. Magenta/violet reads as "anime"
     without going into fan-site territory. */
  --viral-from:    #a855f7;  /* violet-500 */
  --viral-to:      #ec4899;  /* pink-500 */
  --viral-gradient: linear-gradient(135deg, var(--viral-from) 0%, var(--viral-to) 100%);

  /* Combined "hero" gradient — fuses brand blue with viral magenta. */
  --hero-gradient: linear-gradient(120deg, #60a5fa 0%, #a855f7 50%, #ec4899 100%);

  /* Glow utilities */
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 8px 32px var(--accent-strong);
  --glow-viral:  0 0 0 1px rgba(168, 85, 247, 0.30), 0 8px 40px rgba(236, 72, 153, 0.35);

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --ok:    #22c55e;
  --warn:  #facc15;
  --error: #ef4444;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.65);

  /* ── Spacing (4px scale) ────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Bangers', 'Inter', sans-serif;  /* used very sparingly */

  /* Type scale — fluid for hero, fixed for body. */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);  /* 44-72px hero */
  --fs-h1:      clamp(2.25rem, 4vw, 3.25rem); /* 36-52px section heads */
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);  /* 28-40px */
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);/* 22-28px */
  --fs-lead:    1.25rem;     /* 20px */
  --fs-body:    1rem;        /* 16px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-xs:      0.75rem;     /* 12px */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.05em;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-narrow: 880px;
  --nav-height: 72px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* expo out — feels punchy */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-nav:    50;
  --z-modal:  100;
  --z-toast:  200;
}

/* @property declarations for animated gradient angles (used by glow utilities) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-angle    { to { --angle: 360deg; } }
@keyframes pulse-glow      { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}