/* ============================================================
   tokens.css — reset + design tokens (CSS custom properties)
   Carregado antes de public.css / admin.css em todas as páginas.
   --color-primary/secondary/accent são sobrescritos inline pelo
   layout com os valores das Configurações.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    tab-size: 4;
}

body {
    min-height: 100vh;
    line-height: 1.6;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--heading);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

ul, ol {
    padding-left: 1.25rem;
}

table {
    border-collapse: collapse;
    width: 100%;
}

::selection {
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

[hidden] {
    display: none !important;
}

/* Scrollbars discretas (WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    /* Tipografia */
    --font-sans: "Montserrat", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Marca (fallbacks; sobrescritos inline pelo layout) */
    --color-primary: #1c61e7;
    --color-secondary: #0f172a;
    --color-accent: #f59e0b;

    /* Derivados de marca */
    --color-primary-ink: #ffffff;
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, #000000);
    --color-primary-glow: color-mix(in srgb, var(--color-primary) 32%, transparent);
    --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000);
    --link: color-mix(in srgb, var(--color-primary) 92%, #000000);

    /* Superfícies / texto (tema claro) */
    --bg: #f4f5f8;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 60%);
    --surface: #ffffff;
    --surface-2: #f6f7fb;
    --surface-3: #eef0f6;
    --border: #e6e8ef;
    --border-strong: #d4d8e3;
    --text: #3d4657;
    --heading: #111726;
    --muted: #6b7385;

    /* Feedback */
    --success: #15a34a;
    --success-soft: #dcfce7;
    --danger: #e11d48;
    --danger-soft: #ffe4e6;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --info: var(--color-primary);
    --info-soft: color-mix(in srgb, var(--color-primary) 12%, #ffffff);

    /* Forma */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Sombra — camadas suaves (estilo SaaS moderno) */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    --shadow: 0 2px 4px -1px rgba(16, 24, 40, .06), 0 8px 20px -6px rgba(16, 24, 40, .12);
    --shadow-lg: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 24px 48px -12px rgba(16, 24, 40, .22);
    --shadow-brand: 0 8px 24px -6px var(--color-primary-glow);

    /* Espaçamento / layout */
    --container: 1240px;
    --container-narrow: 760px;
    --gap: 24px;

    /* Movimento */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --t-fast: .14s var(--ease);
    --t: .22s var(--ease);
}

/* Tema escuro do painel (data-theme="dark" no <html>, salvo por usuário via admin.js) */
[data-theme="dark"] {
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 24%, #0b1020);
    --color-primary-glow: color-mix(in srgb, var(--color-primary) 45%, transparent);
    --link: color-mix(in srgb, var(--color-primary) 55%, #ffffff);

    --bg: #0a0e1a;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 55%);
    --surface: #121828;
    --surface-2: #171e30;
    --surface-3: #1e273c;
    --border: #262f45;
    --border-strong: #38435f;
    --text: #c3cbdb;
    --heading: #f4f7fc;
    --muted: #8b95ac;

    --success-soft: color-mix(in srgb, var(--success) 22%, #0a0e1a);
    --danger-soft: color-mix(in srgb, var(--danger) 22%, #0a0e1a);
    --warning-soft: color-mix(in srgb, var(--warning) 22%, #0a0e1a);
    --info-soft: color-mix(in srgb, var(--color-primary) 20%, #0a0e1a);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
    --shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 28px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, .55), 0 28px 56px -14px rgba(0, 0, 0, .7);
}