/* ============================================================
   DESIGN TOKENS — identidade visual EAD Play (dark + light)
   ============================================================ */
:root {
    /* — Marca — */
    --primary-50: #eef2ff;
    --primary-100: #dbe4ff;
    --primary-200: #bac8ff;
    --primary-300: #91a7ff;
    --primary-400: #748ffc;
    --primary-500: #5c7cfa;
    --primary-600: #4c6ef5;
    --primary-700: #4263eb;
    --primary-800: #3b5bdb;
    --violet: #7c3aed;
    --primary-rgb: 76, 110, 245;
    --violet-rgb: 124, 58, 237;

    --accent: #f59e0b;
    --accent-rgb: 245, 158, 11;
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --info: #06b6d4;

    --gradient-primary: linear-gradient(135deg, #4c6ef5 0%, #7c3aed 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(76, 110, 245, .18) 0%, rgba(124, 58, 237, .12) 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);

    /* — Superfícies (dark por padrão) — */
    --bg: #0f1117;
    --bg-elev: #13161f;
    --surface: #1a1d2e;
    --surface-2: #232640;
    --surface-3: #2a2d4a;
    --surface-glass: rgba(26, 29, 46, .72);
    --card: linear-gradient(145deg, rgba(42, 45, 74, .55) 0%, rgba(26, 29, 46, .85) 100%);
    --border: rgba(255, 255, 255, .07);
    --border-strong: rgba(255, 255, 255, .13);
    --sidebar-bg: linear-gradient(180deg, #171a2b 0%, #12141f 100%);
    --sidebar-fade: #12141f;
    --topbar-bg: rgba(15, 17, 23, .72);

    --text: #e6e8f2;
    --text-muted: #9095ab;
    --text-soft: #6b7089;
    --text-on-primary: #fff;
    --heading-gradient: linear-gradient(135deg, #fff 0%, #b9bfd6 100%);

    --primary: var(--primary-500);
    --primary-text: var(--primary-400);
    --primary-soft: rgba(var(--primary-rgb), .14);
    --primary-soft-2: rgba(var(--primary-rgb), .24);
    --ring: rgba(var(--primary-rgb), .35);

    --skeleton: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .04) 75%);

    /* — Sombras — */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .55), 0 6px 14px -6px rgba(0, 0, 0, .35);
    --shadow-xl: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --shadow-glow: 0 0 0 1px rgba(var(--primary-rgb), .25), 0 8px 30px rgba(var(--primary-rgb), .25);

    /* — Tipografia — */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-base: .9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;

    /* — Espaçamento / raio — */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --r-sm: .5rem;
    --r-md: .75rem;
    --r-lg: 1rem;
    --r-xl: 1.25rem;
    --r-2xl: 1.5rem;
    --r-full: 999px;

    /* — Movimento — */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 400ms;

    /* — Layout — */
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 78px;
    --topbar-h: 64px;
    --content-max: 1320px;
    --page-pad: clamp(1rem, 2.5vw, 2.25rem);

    /* — Z-index — */
    --z-sidebar: 200;
    --z-topbar: 150;
    --z-dropdown: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-progress: 600;
    --z-splash: 700;

    color-scheme: dark;
}

/* ============================================================
   MODO LIGHT
   ============================================================ */
[data-theme="light"] {
    --bg: #f0f2f8;
    --bg-elev: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #eef0f8;
    --surface-3: #e4e7f2;
    --surface-glass: rgba(255, 255, 255, .78);
    --card: linear-gradient(145deg, #ffffff 0%, #f8f9fd 100%);
    --border: #e3e6f0;
    --border-strong: #cfd4e6;
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
    --sidebar-fade: #f7f8fc;
    --topbar-bg: rgba(240, 242, 248, .82);

    --text: #1a1d2e;
    --text-muted: #5f6478;
    --text-soft: #8b90a6;
    --heading-gradient: linear-gradient(135deg, #1a1d2e 0%, #4b5563 100%);

    --primary-text: var(--primary-700);
    --primary-soft: rgba(var(--primary-rgb), .10);
    --primary-soft-2: rgba(var(--primary-rgb), .18);
    --ring: rgba(var(--primary-rgb), .25);

    --skeleton: linear-gradient(90deg, rgba(0, 0, 0, .04) 25%, rgba(0, 0, 0, .09) 50%, rgba(0, 0, 0, .04) 75%);

    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07);
    --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
    --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .18), 0 6px 14px -6px rgba(16, 24, 40, .08);
    --shadow-xl: 0 30px 70px -20px rgba(16, 24, 40, .25);
    --shadow-glow: 0 0 0 1px rgba(var(--primary-rgb), .18), 0 8px 30px rgba(var(--primary-rgb), .18);

    color-scheme: light;
}

/* Alternância de logo por tema */
[data-theme="light"] .only-dark { display: none !important; }
:not([data-theme="light"]) .only-light { display: none !important; }
html:not([data-theme="light"]) .only-light { display: none !important; }