/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Animated Ad Creator Platform
   Single source of truth for all visual values.
   Every component references these — never hardcode.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand (overridden per-user via JS) ── */
  --brand:            #7C5CFC;
  --brand-light:      #A78BFA;
  --brand-subtle:     rgba(124, 92, 252, 0.08);
  --brand-glass:      rgba(124, 92, 252, 0.12);

  /* ── Backgrounds ── */
  --bg:               #F5F5F7;
  --bg-alt:           #EEEEF1;
  --surface:          #FFFFFF;
  --surface-raised:   #FFFFFF;
  --surface-inset:    #F0F0F3;

  /* ── Glass ── */
  --glass-bg:         rgba(255, 255, 255, 0.72);
  --glass-bg-strong:  rgba(255, 255, 255, 0.85);
  --glass-border:     rgba(255, 255, 255, 0.55);
  --glass-blur:       20px;
  --glass-blur-sm:    10px;

  /* ── Text ── */
  --text:             #1A1A2E;
  --text-2:           #4A4A68;
  --text-3:           #8B8BA3;
  --text-4:           #B4B4C7;
  --text-on-brand:    #FFFFFF;
  --text-on-dark:     #F0F0F3;

  /* ── Borders ── */
  --border:           rgba(0, 0, 0, 0.06);
  --border-strong:    rgba(0, 0, 0, 0.10);
  --border-focus:     var(--brand);

  /* ── Shadows ── */
  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.10);
  --shadow-brand:     0 4px 20px rgba(124, 92, 252, 0.20);

  /* ── Radii ── */
  --radius-xs:        6px;
  --radius-sm:        10px;
  --radius-md:        14px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-full:      9999px;

  /* ── Spacing scale ── */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             20px;
  --sp-6:             24px;
  --sp-8:             32px;
  --sp-10:            40px;
  --sp-12:            48px;
  --sp-16:            64px;

  /* ── Typography ── */
  --font:             'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'Space Mono', 'SF Mono', 'Fira Code', monospace;

  --text-xs:          11px;
  --text-sm:          13px;
  --text-base:        15px;
  --text-md:          17px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         30px;
  --text-3xl:         38px;

  --leading-tight:    1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Transitions ── */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:         120ms;
  --dur:              200ms;
  --dur-slow:         350ms;

  /* ── Semantic colors ── */
  --success:          #22C55E;
  --success-subtle:   rgba(34, 197, 94, 0.08);
  --warning:          #F59E0B;
  --warning-subtle:   rgba(245, 158, 11, 0.08);
  --danger:           #EF4444;
  --danger-subtle:    rgba(239, 68, 68, 0.06);
  --info:             #3B82F6;
  --info-subtle:      rgba(59, 130, 246, 0.08);

  /* ── Track colors (editor) ── */
  --track-vo:         #7C5CFC;
  --track-sfx:        #F59E0B;
  --track-music:      #22C55E;
  --track-video:      var(--brand);

  /* ── Layout ── */
  --sidebar-w:        240px;
  --header-h:         60px;
  --wizard-max-w:     700px;
  --editor-max-w:     560px;
  --content-max-w:    1200px;

  /* ── Z-index scale ── */
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;
}


/* ═══ Dark theme overrides (future) ═══ */
/* 
[data-theme="dark"] {
  --bg:             #0B0B13;
  --bg-alt:         #111119;
  --surface:        #16161E;
  --surface-raised: #1C1C26;
  --surface-inset:  #0F0F17;
  --text:           #E8E4F0;
  --text-2:         rgba(255,255,255,0.6);
  --text-3:         rgba(255,255,255,0.35);
  --text-4:         rgba(255,255,255,0.18);
  --border:         rgba(255,255,255,0.06);
  --border-strong:  rgba(255,255,255,0.10);
  --glass-bg:       rgba(22,22,30,0.72);
  --glass-border:   rgba(255,255,255,0.08);
  --shadow-sm:      0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
} 
*/