/* ============================================
   Weny CRM — Design Tokens v5 (Supabase clone + Coral)
   Estética: Supabase UI / shadcn / Geist
   Cor primária: coral #F97316
   Light + dark com toggle persistente
   ============================================ */

:root {
    /* === Light mode (default) === */
    --w-bg: #FFFFFF;
    --w-bg-2: #FAFAFA;            /* alternate sections */
    --w-surface: #FFFFFF;
    --w-surface-2: #F4F4F5;        /* code blocks, subtle panels */
    --w-overlay: rgba(255, 255, 255, 0.85);

    --w-text: #18181B;             /* zinc-900 */
    --w-text-muted: #52525B;       /* zinc-600 */
    --w-text-subtle: #A1A1AA;      /* zinc-400 */
    --w-text-on-primary: #FFFFFF;

    --w-border: #E4E4E7;           /* zinc-200 */
    --w-border-strong: #D4D4D8;    /* zinc-300 */
    --w-divider: #F4F4F5;          /* zinc-100 */

    /* Cor primária — coral */
    --w-primary: #F97316;          /* orange-500 */
    --w-primary-hover: #EA580C;    /* orange-600 */
    --w-primary-active: #C2410C;   /* orange-700 */
    --w-primary-soft: rgba(249, 115, 22, 0.10);
    --w-primary-soft-2: rgba(249, 115, 22, 0.16);
    --w-on-primary: #FFFFFF;

    /* Acentos secundários (uso restrito em tags/badges/chart) */
    --w-accent-blue:   #3B82F6;
    --w-accent-purple: #A855F7;
    --w-accent-pink:   #EC4899;

    /* Estados */
    --w-success: #10B981;
    --w-warning: #F59E0B;
    --w-danger:  #EF4444;
    --w-info:    #3B82F6;

    /* Sombras Supabase-style — sutis, cleancut */
    --w-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --w-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --w-shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --w-shadow-lg:  0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);

    /* Glow sutil — só CTAs primárias */
    --w-glow-primary: 0 0 0 1px rgba(249, 115, 22, 0.20), 0 4px 12px -2px rgba(249, 115, 22, 0.18);

    /* Radius — Supabase é médio/cleancut, não muito arredondado */
    --w-radius-sm: 4px;
    --w-radius:    6px;
    --w-radius-md: 8px;
    --w-radius-lg: 12px;
    --w-radius-pill: 9999px;

    /* Tipografia */
    --w-font-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --w-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --w-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --w-easing-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Heights / spacing tokens — alinhados ao Supabase */
    --w-input-h: 36px;
    --w-btn-h:   36px;
}

/* === Dark mode === */
[data-theme="dark"] {
    --w-bg: #0A0A0A;               /* near-black, Supabase-like */
    --w-bg-2: #111111;
    --w-surface: #161616;
    --w-surface-2: #1C1C1C;
    --w-overlay: rgba(10, 10, 10, 0.85);

    --w-text: #FAFAFA;
    --w-text-muted: #A1A1AA;
    --w-text-subtle: #71717A;
    --w-text-on-primary: #FFFFFF;

    --w-border: #27272A;           /* zinc-800 */
    --w-border-strong: #3F3F46;    /* zinc-700 */
    --w-divider: #1F1F22;

    --w-primary: #FB923C;          /* orange-400 — mais clara pra contraste no dark */
    --w-primary-hover: #F97316;
    --w-primary-active: #EA580C;
    --w-primary-soft: rgba(251, 146, 60, 0.12);
    --w-primary-soft-2: rgba(251, 146, 60, 0.18);
    --w-on-primary: #0A0A0A;

    --w-accent-blue:   #60A5FA;
    --w-accent-purple: #C084FC;
    --w-accent-pink:   #F472B6;

    --w-success: #34D399;
    --w-warning: #FBBF24;
    --w-danger:  #F87171;
    --w-info:    #60A5FA;

    --w-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --w-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
    --w-shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.20);
    --w-shadow-lg:  0 12px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.25);

    --w-glow-primary: 0 0 0 1px rgba(251, 146, 60, 0.30), 0 4px 14px -2px rgba(251, 146, 60, 0.32);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --w-bg: #0A0A0A;
        --w-bg-2: #111111;
        --w-surface: #161616;
        --w-surface-2: #1C1C1C;
        --w-overlay: rgba(10, 10, 10, 0.85);
        --w-text: #FAFAFA;
        --w-text-muted: #A1A1AA;
        --w-text-subtle: #71717A;
        --w-border: #27272A;
        --w-border-strong: #3F3F46;
        --w-divider: #1F1F22;
        --w-primary: #FB923C;
        --w-primary-hover: #F97316;
        --w-primary-active: #EA580C;
        --w-primary-soft: rgba(251, 146, 60, 0.12);
        --w-primary-soft-2: rgba(251, 146, 60, 0.18);
        --w-on-primary: #0A0A0A;
        --w-accent-blue: #60A5FA;
        --w-accent-purple: #C084FC;
        --w-accent-pink: #F472B6;
        --w-success: #34D399;
        --w-warning: #FBBF24;
        --w-danger: #F87171;
        --w-info: #60A5FA;
        --w-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
        --w-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
        --w-shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.20);
        --w-shadow-lg:  0 12px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.25);
        --w-glow-primary: 0 0 0 1px rgba(251, 146, 60, 0.30), 0 4px 14px -2px rgba(251, 146, 60, 0.32);
    }
}