/* ==========================================================================
   Quebrada Studios · Changelog — Design Tokens (redesign)
   Accent violeta. Dark é o tema padrão; light é override por [data-theme].
   Bloco COMPAT no final mapeia nomes antigos → novos (temporário, removido
   quando todos os componentes migrarem).
   ========================================================================== */

:root {
    /* ---- Violeta (accent do produto) ---- */
    --v-50:  #f3efff;
    --v-100: #e6ddff;
    --v-200: #cebeff;
    --v-300: #b199ff;
    --v-400: #9573ff;
    --v-500: #7d5cff;   /* accent primário */
    --v-600: #6a45f0;
    --v-700: #5733cc;
    --v-800: #42269b;
    --v-900: #2b1a66;

    --v-a08: rgba(125, 92, 255, .08);
    --v-a12: rgba(125, 92, 255, .12);
    --v-a20: rgba(125, 92, 255, .20);
    --v-a40: rgba(125, 92, 255, .40);

    /* ---- Espaçamento ---- */
    --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;

    /* ---- Raio ---- */
    --r-sm: 5px;  --r-md: 8px;  --r-lg: 10px; --r-xl: 14px; --r-full: 999px;

    /* ---- Elevação ---- */
    --sh-sm: 0 1px 2px rgba(0,0,0,.30);
    --sh-md: 0 4px 12px -2px rgba(0,0,0,.40);
    --sh-lg: 0 16px 40px -12px rgba(0,0,0,.55);
    --sh-xl: 0 24px 64px -16px rgba(0,0,0,.65);

    /* ---- Tipografia ---- */
    --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-2xs: 10px;
    --fs-xs:  11px;
    --fs-sm:  12px;
    --fs-base: 13px;   /* corpo padrão da UI */
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  20px;
    --fs-2xl: 26px;

    --lh-tight: 1.2;
    --lh-body: 1.45;

    /* ---- Movimento (para micro-transições CSS; coreografias ficam no motion.js) ---- */
    --d-1: 90ms; --d-2: 140ms; --d-3: 200ms; --d-4: 280ms;
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-inout: cubic-bezier(.65, 0, .35, 1);
    --e-in: cubic-bezier(.4, 0, 1, 1);

    /* ---- Camadas ---- */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-toast: 400;

    /* ==== TEMA DARK (padrão) ==== */
    --bg:         #08080b;
    --bg-sidebar: #0b0b0f;
    --surface:    #101014;
    --surface-2:  #16161c;
    --surface-3:  #1d1d25;
    --glass:      rgba(11, 11, 15, .72);
    --border:     rgba(255,255,255,.06);
    --border-hi:  rgba(255,255,255,.11);
    --border-hot: rgba(255,255,255,.16);
    --text:       #ecedef;
    --text-dim:   #8b8b96;
    --text-mute:  #5b5b66;

    --accent:     var(--v-500);
    --accent-hi:  var(--v-400);
    --accent-lo:  var(--v-600);
    --on-accent:  #ffffff;
    --ring:       var(--v-a40);
    --sel:        var(--v-a20);

    --ok:   #3ecf8e;
    --warn: #f5b544;
    --err:  #f56565;
    --info: #5b9cf5;

    color-scheme: dark;
}

/* ==== TEMA LIGHT ==== */
:root[data-theme="light"] {
    --sh-sm: 0 1px 2px rgba(20,20,26,.06);
    --sh-md: 0 4px 12px -2px rgba(20,20,26,.10);
    --sh-lg: 0 16px 40px -12px rgba(20,20,26,.16);
    --sh-xl: 0 24px 64px -16px rgba(20,20,26,.20);

    --bg:         #fbfbfc;
    --bg-sidebar: #f7f7f9;
    --surface:    #ffffff;
    --surface-2:  #f5f5f7;
    --surface-3:  #ffffff;
    --glass:      rgba(255,255,255,.72);
    --border:     rgba(0,0,0,.07);
    --border-hi:  rgba(0,0,0,.12);
    --border-hot: rgba(0,0,0,.16);
    --text:       #14141a;
    --text-dim:   #5f5f6b;
    --text-mute:  #91919d;

    --accent:     var(--v-600);
    --accent-hi:  var(--v-500);
    --accent-lo:  var(--v-700);
    --on-accent:  #ffffff;
    --ring:       var(--v-a40);
    --sel:        var(--v-a20);

    --ok:   #16a34a;
    --warn: #d97706;
    --err:  #dc2626;
    --info: #2563eb;

    color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
    :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; }
}

/* ==========================================================================
   COMPAT — nomes antigos mapeados aos novos (TEMPORÁRIO).
   Mantém components.css/app.css/editor.css/auth.css/install.css funcionando
   até serem reescritos. Remover ao final da migração.
   ========================================================================== */
:root {
    --brand:       var(--accent);
    --brand-50:    var(--v-50);
    --brand-100:   var(--v-100);
    --brand-200:   var(--v-200);
    --brand-300:   var(--v-300);
    --brand-400:   var(--v-400);
    --brand-500:   var(--v-500);
    --brand-600:   var(--v-600);
    --brand-700:   var(--v-700);
    --brand-800:   var(--v-800);
    --brand-900:   var(--v-900);
    --brand-soft:  var(--v-a12);
    --brand-contrast: var(--on-accent);
    --accent-400:  var(--v-400);
    --accent-500:  var(--v-500);

    --surface-glass: var(--glass);
    --border-strong: var(--border-hi);
    --text-muted:  var(--text-dim);
    --text-subtle: var(--text-mute);

    --success: var(--ok);
    --warning: var(--warn);
    --danger:  var(--err);
    --info-c:  var(--info);

    --shadow-sm: var(--sh-sm);
    --shadow-md: var(--sh-md);
    --shadow-lg: var(--sh-lg);
    --shadow-glow: var(--sh-md);

    /* gradientes/glow eliminados → viram sólido/transparente */
    --grad-brand: var(--v-500);
    --grad-brand-soft: var(--v-a12);
    --bg-glow-1: transparent;
    --bg-glow-2: transparent;

    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-pill: var(--r-full);

    --space-1: var(--sp-1);
    --space-2: var(--sp-2);
    --space-3: var(--sp-3);
    --space-4: var(--sp-4);
    --space-5: var(--sp-6);
    --space-6: var(--sp-8);
    --space-7: var(--sp-12);
    --space-8: 64px;

    --font-sans: var(--font-ui);
    --font-display: var(--font-ui);

    --text-xs:  var(--fs-xs);
    --text-sm:  var(--fs-sm);
    --text-base: var(--fs-base);
    --text-lg:  var(--fs-lg);
    --text-xl:  var(--fs-xl);
    --text-2xl: var(--fs-2xl);
    --text-3xl: 30px;

    --leading-tight: var(--lh-tight);
    --leading-normal: var(--lh-body);

    --dur-fast: var(--d-1);
    --dur-base: var(--d-3);
    --dur-slow: var(--d-4);
    --ease-out: var(--e-out);
    --ease-spring: var(--e-out);
    --ease-in-out: var(--e-inout);
}