/*
ARQUIVO: tokens e reset global do design system.

POR QUE ELE EXISTE:
- isola os tokens semanticos do tema
- define o reset base global
- oferece aliases de compatibilidade para o legado

PONTO CRITICO:
- este arquivo deve ser a unica autoridade de tokens do tema
*/

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/manrope/manrope-latin-variable.938c6e8019b6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Typography */
    --font-body: "Manrope", system-ui, sans-serif;
    --font-display: "Object Sans", "Manrope", system-ui, sans-serif;
    --font-display-critical: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    --font-size-h1: 28px;
    --font-size-h2: 22px;
    --font-size-h3: 18px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --weight-title: 700;
    --weight-subtitle: 600;
    --weight-body: 400;

    /* Motion */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Spacing */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --section-gap: 24px;
    --grid-columns: 12;
    --grid-gap: 20px;

    /* Radius */
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-shell: 24px;

    /* Canonical theme tokens */
    --theme-bg-root: #f5f7fb;
    --theme-bg-depth: #e7edf7;
    --theme-bg-stage: linear-gradient(180deg, #f8fafe 0%, #f2f6fb 42%, #edf2f8 100%);
    --theme-bg-stage-depth:
        radial-gradient(circle at 10% 14%, rgba(255, 255, 255, 0.92), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(95, 143, 247, 0.08), transparent 20%),
        radial-gradient(circle at 18% 84%, rgba(104, 217, 238, 0.06), transparent 22%),
        radial-gradient(circle at 72% 72%, rgba(95, 143, 247, 0.05), transparent 24%);

    --theme-surface: rgba(255, 255, 255, 0.88);
    --theme-surface-secondary: rgba(246, 249, 253, 0.92);
    --theme-surface-strong: rgba(255, 255, 255, 0.96);
    --theme-surface-muted: rgba(240, 245, 252, 0.88);
    --theme-surface-inverse: #091221;
    --theme-surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.9));
    --theme-surface-panel-strong: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 252, 0.94));
    --theme-surface-panel-dark: linear-gradient(180deg, rgba(9, 18, 33, 0.98), rgba(12, 24, 44, 0.96));
    --theme-card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 252, 0.88));
    --theme-card-surface-strong: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 252, 0.94));
    --theme-card-border: rgba(99, 122, 159, 0.18);
    --theme-card-border-strong: rgba(99, 122, 159, 0.26);
    --theme-card-glow: rgba(95, 143, 247, 0.12);
    --theme-card-shadow: 0 16px 40px rgba(26, 39, 72, 0.08), 0 6px 16px rgba(26, 39, 72, 0.05);
    --theme-card-shadow-lift: 0 24px 56px rgba(18, 28, 57, 0.12), 0 10px 24px rgba(18, 28, 57, 0.08);
    --theme-chrome-surface: color-mix(in srgb, rgba(255, 255, 255, 0.88) 90%, transparent);
    --theme-chrome-border: rgba(110, 133, 173, 0.2);
    --theme-chrome-glow: rgba(95, 143, 247, 0.08);

    --theme-text-primary: #091a2f;
    --theme-text-secondary: #29415f;
    --theme-text-muted: #60738f;
    --theme-text-soft: #3a5371;

    --theme-border-soft: rgba(99, 122, 159, 0.18);
    --theme-border-strong: rgba(99, 122, 159, 0.3);
    --theme-border-glow: rgba(95, 143, 247, 0.24);

    --theme-shadow-soft: 0 12px 28px rgba(22, 35, 68, 0.08), 0 4px 12px rgba(22, 35, 68, 0.04);
    --theme-shadow-lift: 0 20px 48px rgba(17, 27, 56, 0.12), 0 8px 20px rgba(17, 27, 56, 0.07);
    --theme-shadow-xl: 0 32px 68px rgba(14, 22, 47, 0.16), 0 12px 26px rgba(14, 22, 47, 0.09);

    --theme-accent-primary: #68d9ee;
    --theme-accent-support: #5f8ff7;
    --theme-accent-premium: #d96bc3;
    --theme-accent-success: #29d398;
    --theme-accent-warning: #f7b84d;
    --theme-accent-danger: #ff5f7e;
    --theme-accent-primary-alpha: color-mix(in srgb, var(--theme-accent-primary) 16%, transparent);
    --theme-accent-support-alpha: color-mix(in srgb, var(--theme-accent-support) 16%, transparent);
    --theme-accent-premium-alpha: color-mix(in srgb, var(--theme-accent-premium) 16%, transparent);
    --theme-accent-success-alpha: color-mix(in srgb, var(--theme-accent-success) 16%, transparent);
    --theme-accent-warning-alpha: color-mix(in srgb, var(--theme-accent-warning) 16%, transparent);
    --theme-accent-danger-alpha: color-mix(in srgb, var(--theme-accent-danger) 16%, transparent);
    --theme-focus-ring: color-mix(in srgb, var(--theme-accent-support) 36%, transparent);
    --theme-selection: rgba(95, 143, 247, 0.16);

    /* Sidebar */
    --sidebar-bg: #08111f;
    --sidebar-line: rgba(136, 159, 199, 0.12);
    --sidebar-ink: #eff6ff;
    --sidebar-muted: rgba(191, 204, 226, 0.74);
    --sidebar-active: rgba(95, 143, 247, 0.14);
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-focus: rgba(94, 162, 255, 0.28);
    --sidebar-active-bar: #5f8ff7;

    --content-max: 1560px;

    /* Legacy compatibility aliases */
    --bg: var(--theme-bg-root);
    --bg-depth: var(--theme-bg-depth);
    --bg-elevated: var(--theme-surface);
    --bg-300: var(--theme-surface-secondary);
    --surface: var(--theme-surface);
    --surface-2: var(--theme-surface-secondary);
    --surface-muted: var(--theme-surface-muted);
    --surface-strong: var(--theme-surface-strong);
    --surface-inverse: var(--theme-surface-inverse);
    --ink: var(--theme-text-primary);
    --ink-soft: var(--theme-text-secondary);
    --muted: var(--theme-text-muted);
    --muted-strong: var(--theme-text-soft);
    --neutral: #94a3b8;
    --line: var(--theme-border-soft);
    --line-strong: var(--theme-border-strong);
    --shadow-soft: var(--theme-shadow-soft);
    --shadow-lift: var(--theme-shadow-lift);
    --shadow-xl: var(--theme-shadow-xl);

    --brand: var(--theme-accent-support);
    --brand-dark: #3374e0;
    --accent: var(--theme-accent-success);
    --accent-2: #0f8278;
    --accent-primary: var(--theme-accent-primary);
    --accent-primary-alpha: var(--theme-accent-primary-alpha);
    --success: var(--theme-accent-success);
    --success-primary: var(--theme-accent-success);
    --success-primary-alpha: var(--theme-accent-success-alpha);
    --warning: var(--theme-accent-warning);
    --warning-primary: var(--theme-accent-warning);
    --danger: var(--theme-accent-danger);
    --danger-primary: var(--theme-accent-danger);
    --text-500: var(--theme-text-muted);
    --border-100: var(--theme-border-soft);

    /* Front Display Wall compatibility */
    --fdw-copper: var(--theme-accent-premium);
    --fdw-copper-soft: var(--theme-accent-premium-alpha);
    --fdw-sky: var(--theme-accent-support);
    --fdw-sky-soft: var(--theme-accent-support-alpha);
    --fdw-aqua: var(--theme-accent-success);
    --fdw-aqua-soft: var(--theme-accent-success-alpha);
    --fdw-amber: var(--theme-accent-warning);
    --fdw-amber-soft: var(--theme-accent-warning-alpha);
    --fdw-stage: var(--theme-bg-stage);
    --fdw-stage-depth: var(--theme-bg-stage-depth);
    --fdw-panel: var(--theme-surface-panel);
    --fdw-panel-strong: var(--theme-surface-panel-strong);
    --fdw-panel-dark: var(--theme-surface-panel-dark);
    --fdw-line: var(--theme-border-soft);
    --fdw-line-strong: var(--theme-border-strong);
    --fdw-shadow: var(--theme-shadow-soft);
    --fdw-shadow-lift: var(--theme-shadow-lift);
    --card-surface: var(--theme-card-surface);
    --card-surface-strong: var(--theme-card-surface-strong);
    --card-border: var(--theme-card-border);
    --card-border-strong: var(--theme-card-border-strong);
    --card-shadow: var(--theme-card-shadow);
    --card-shadow-lift: var(--theme-card-shadow-lift);
    --card-glow: var(--theme-card-glow);
    --chrome-surface: var(--theme-chrome-surface);
    --chrome-border: var(--theme-chrome-border);
    --chrome-glow: var(--theme-chrome-glow);
    --scrollbar-thumb: color-mix(in srgb, var(--theme-accent-support) 42%, var(--theme-border-soft) 58%);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--theme-accent-support) 56%, var(--theme-border-soft) 44%);
}

body[data-theme="dark"] {
    color-scheme: dark;

    --theme-bg-root: #090d16;
    --theme-bg-depth: #0f1624;
    --theme-bg-stage: linear-gradient(180deg, #080b12 0%, #0b1120 44%, #121b2d 100%);
    --theme-bg-stage-depth:
        radial-gradient(circle at 12% 12%, rgba(74, 144, 226, 0.16), transparent 26%),
        radial-gradient(circle at 84% 16%, rgba(0, 229, 255, 0.1), transparent 22%),
        radial-gradient(circle at 18% 84%, rgba(255, 0, 200, 0.11), transparent 24%),
        radial-gradient(circle at 74% 70%, rgba(74, 144, 226, 0.08), transparent 22%);

    --theme-surface: rgba(11, 17, 28, 0.82);
    --theme-surface-secondary: rgba(15, 23, 37, 0.88);
    --theme-surface-strong: rgba(20, 30, 48, 0.92);
    --theme-surface-muted: rgba(8, 13, 22, 0.9);
    --theme-surface-inverse: #f8fafc;
    --theme-surface-panel: linear-gradient(180deg, rgba(12, 18, 29, 0.94), rgba(15, 24, 39, 0.9));
    --theme-surface-panel-strong: linear-gradient(160deg, rgba(17, 26, 42, 0.96), rgba(22, 34, 54, 0.92));
    --theme-surface-panel-dark: linear-gradient(180deg, rgba(7, 11, 19, 0.98), rgba(10, 17, 28, 0.96));
    --theme-card-surface: linear-gradient(180deg, rgba(13, 21, 34, 0.9), rgba(16, 26, 41, 0.84));
    --theme-card-surface-strong: linear-gradient(160deg, rgba(18, 28, 45, 0.96), rgba(23, 36, 57, 0.92));
    --theme-card-border: rgba(128, 151, 190, 0.18);
    --theme-card-border-strong: rgba(128, 151, 190, 0.3);
    --theme-card-glow: rgba(74, 144, 226, 0.16);
    --theme-card-shadow: 0 20px 40px rgba(1, 4, 10, 0.38), 0 8px 20px rgba(2, 8, 18, 0.24);
    --theme-card-shadow-lift: 0 28px 58px rgba(1, 4, 10, 0.48), 0 12px 28px rgba(2, 8, 18, 0.32);
    --theme-chrome-surface: color-mix(in srgb, rgba(11, 17, 28, 0.92) 92%, transparent);
    --theme-chrome-border: rgba(129, 157, 198, 0.22);
    --theme-chrome-glow: rgba(74, 144, 226, 0.12);

    --theme-text-primary: #eff4ff;
    --theme-text-secondary: #cad7ec;
    --theme-text-muted: #91a4c4;
    --theme-text-soft: #dce6fb;

    --theme-border-soft: rgba(128, 151, 190, 0.18);
    --theme-border-strong: rgba(128, 151, 190, 0.32);
    --theme-border-glow: rgba(0, 229, 255, 0.22);

    --theme-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.16);
    --theme-shadow-lift: 0 24px 52px rgba(0, 0, 0, 0.36), 0 10px 22px rgba(0, 0, 0, 0.22);
    --theme-shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.46), 0 12px 28px rgba(0, 0, 0, 0.28);

    --theme-accent-primary: #00e5ff;
    --theme-accent-support: #4a90e2;
    --theme-accent-premium: #ff00c8;
    --theme-accent-primary-alpha: color-mix(in srgb, var(--theme-accent-primary) 18%, transparent);
    --theme-accent-support-alpha: color-mix(in srgb, var(--theme-accent-support) 18%, transparent);
    --theme-accent-premium-alpha: color-mix(in srgb, var(--theme-accent-premium) 16%, transparent);
    --theme-focus-ring: color-mix(in srgb, var(--theme-accent-primary) 28%, transparent);
    --theme-selection: rgba(74, 144, 226, 0.2);

    --sidebar-bg: #060a12;
    --sidebar-line: rgba(128, 151, 190, 0.12);
    --sidebar-ink: #edf6ff;
    --sidebar-muted: rgba(198, 211, 235, 0.72);
    --sidebar-active: rgba(74, 144, 226, 0.18);
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-focus: rgba(0, 229, 255, 0.24);
}

body[data-theme="dark"] {
    background: var(--theme-bg-root);
}

/* Placeholder contrast */
input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: var(--ink);
    opacity: 0.85;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.5;
    font-weight: var(--weight-body);
    color: var(--ink);
    overflow-x: clip;
    background: var(--fdw-stage);
    transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before,
body::after {
    display: block;
}

body::before {
    background: var(--fdw-stage-depth);
}

body::after {
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 102, 128, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 102, 128, 0.018) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 82%);
    opacity: 0.08;
}

@media (prefers-reduced-motion: no-preference) {
    body::before {
        animation: fdw-stage-drift 52s ease-in-out infinite alternate;
        transform-origin: center;
    }
}

@keyframes fdw-stage-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1) hue-rotate(0deg);
    }

    to {
        transform: translate3d(0, -2px, 0) scale(1.003);
        filter: saturate(1.01) hue-rotate(-1deg);
    }
}

h1,
h2,
h3,
.metric,
.section-title,
.section-title-sm,
.brand {
    font-family: var(--font-display);
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: -0.03em;
}

h1 {
    font-size: var(--font-size-h1);
    line-height: 1.08;
    font-weight: var(--weight-title);
}

h2 {
    font-size: var(--font-size-h2);
    line-height: 1.16;
    font-weight: var(--weight-title);
}

h3,
.section-title-sm {
    font-size: var(--font-size-h3);
    line-height: 1.24;
}

h3 {
    font-weight: var(--weight-title);
}

.section-title-sm {
    font-weight: var(--weight-subtitle);
}

p,
li,
td,
th,
input,
select,
textarea,
button,
.meta-text {
    font-size: var(--font-size-body);
    font-weight: var(--weight-body);
}

.meta-text {
    margin: 0;
    line-height: 1.6;
}

small,
.meta-text-sm {
    font-size: var(--font-size-small);
    line-height: 1.45;
    font-weight: var(--weight-body);
}

.meta-text-sm {
    margin: 4px 0;
}

.skip-link {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 40;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--ink);
    border: 1px solid var(--line);
    text-decoration: none;
    transform: translateY(-160%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--motion-base) var(--ease-standard);
}

.skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

::selection {
    background: var(--theme-selection);
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    transition:
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard),
        background var(--motion-base) var(--ease-standard);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--theme-focus-ring);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent-support) 12%, transparent);
    transform: translateY(-1px);
}

input[readonly] {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

button,
input,
select,
textarea {
    accent-color: var(--brand);
}

:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}