/**
 * DataPulseX — Design System Tokens
 * ----------------------------------------------------------------
 * Fonte única de verdade visual (nível Stripe / Linear / Vercel).
 *
 * Tema: html[data-theme="light|dark"]
 * Nomes canônicos abaixo. Aliases legados (--bg-canvas, --ink-*, --line…)
 * apontam para os canônicos — não hardcode cores nos componentes.
 */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700|jetbrains-mono:400,500,600,700|sora:600');

/* ═══════════════════════════════════════════════════════════════
   LIGHT — superfícies claras, tipografia Inter
   ═══════════════════════════════════════════════════════════════ */
:root,
html,
html[data-theme="light"],
html:not([data-theme]),
html[data-theme="light"] .dpx-ds,
html:not([data-theme]) .dpx-ds,
body.dpx-meridian-app {
    /* Superfícies */
    --bg-page: #F7F8F7;
    --bg-card: #FFFFFF;
    --bg-card-nested: #F1F3F2;
    --bg-hover: #EAEDEB;

    /* Bordas — neutro suave (light) */
    --border-default: rgba(10, 14, 13, 0.08);
    --border-strong: rgba(10, 14, 13, 0.14);

    /* Texto — 4 níveis (WCAG AA ≥ 4.5:1 em --bg-page / --bg-card) */
    --text-primary: #0A0E0D;
    --text-secondary: #4A524F;
    --text-muted: #5F6B66;
    --text-disabled: #9AA39E;

    /* Marca — verde-água (identidade + dados neutros) */
    --accent: #0E9C82;
    --accent-subtle: rgba(14, 156, 130, 0.12);
    --accent-rgb: 14, 156, 130;
    --accent-ink: #0A6B58;
    --on-accent: #0A0E0D;

    --series-visits: var(--accent);
    --series-uniques: #8B7CF6;
    --series-uniques-rgb: 139, 124, 246;

    /* Semânticas — papel definido, nunca misturar com marca */
    --success: #16A34A;
    --success-bg: rgba(22, 163, 74, 0.10);
    --warning: #D97706;
    --warning-bg: rgba(217, 119, 6, 0.10);
    --danger: #DC2626;
    --danger-bg: rgba(220, 38, 38, 0.10);

    /* Tipografia */
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-data: 'JetBrains Mono', ui-monospace, monospace;
    --font-kpi: 'Sora', var(--font-ui);
    --font-display: var(--font-ui); /* UI display; KPIs usam --font-kpi */

    /* Ritmo — 4 / 8 / 12 / 16 / 24 / 32 / 48 */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 4px;
    --space-1: 8px;
    --space-1-5: 12px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    /* Raios */
    --radius-sm: 6px;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Elevação */
    --shadow-section: 0 1px 2px rgba(10, 14, 13, 0.04), 0 1px 3px rgba(10, 14, 13, 0.06);
    --shadow-card: var(--shadow-section);
    --shadow-menu: 0 8px 24px rgba(10, 14, 13, 0.12);
    --border-section: 1px solid var(--border-default);
    --border-divider: 1px solid var(--border-default);
    --card-padding-md: var(--space-2);
    --card-padding-lg: 20px;

    --icon-size: 18px;
    --icon-stroke: 1.5;
    --icon-color: var(--text-secondary);
    --icon-color-active: var(--accent);

    --chart-area-fill: linear-gradient(
        180deg,
        rgba(var(--accent-rgb), 0.10) 0%,
        transparent 100%
    );

    /* ── Aliases legados → canônicos (não usar em código novo) ── */
    --bg-canvas: var(--bg-page);
    --bg-surface: var(--bg-card);
    --bg-hero: var(--bg-card);
    --ink-950: var(--text-primary);
    --ink-900: var(--text-primary);
    --ink-500: var(--text-secondary);
    --ink-300: var(--text-muted);
    --line: var(--border-default);
    --accent-soft: var(--accent-subtle);
    --gold: var(--warning);
    --positive: var(--success);
    --negative: var(--danger);

    --dv-bg: var(--bg-page);
    --dv-surface: var(--bg-card);
    --dv-border: var(--border-default);
    --dv-text: var(--text-primary);
    --dv-muted: var(--text-secondary);
    --dv-accent: var(--accent);
    --dv-accent-rgb: var(--accent-rgb);
    --dv-radius: var(--radius-card);
    --dv-gap: var(--space-1-5);
    --dv-pad: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   DARK — superfícies escalonadas, bordas branco/baixa opacidade
   Spec: Stripe/Linear analytics chrome
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"],
html[data-theme="dark"] body.dpx-meridian-app,
html[data-theme="dark"] body.dpx-pulse-dashboard,
html[data-theme="dark"] .dpx-ds,
html[data-theme="dark"] .dash-viz.dpx-ds {
    /* Superfícies — cada nível um passo mais claro */
    --bg-page: #0A0E0D;
    --bg-card: #10161A;
    --bg-card-nested: #161E1B;
    --bg-hover: #1A2320;

    /* Bordas — sempre branco com baixa opacidade */
    --border-default: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Texto — 4 níveis, nunca opacity (WCAG AA ≥ 4.5:1 em --bg-page / --bg-card) */
    --text-primary: #F2F5F4;
    --text-secondary: #A8B4AF;
    --text-muted: #8A9590;
    --text-disabled: #5C6763;

    /* Marca */
    --accent: #2DD4A7;
    --accent-subtle: rgba(45, 212, 167, 0.12);
    --accent-rgb: 45, 212, 167;
    --accent-ink: #5EEAD4;
    --on-accent: #0A0E0D;

    /* Séries de gráfico (não misturar com semântica) */
    --series-visits: var(--accent);
    --series-uniques: #8B7CF6;
    --series-uniques-rgb: 139, 124, 246;

    /* Semânticas */
    --success: #4ADE80;
    --success-bg: rgba(74, 222, 128, 0.10);
    --warning: #FBBF24;
    --warning-bg: rgba(251, 191, 36, 0.10);
    --danger: #F87171;
    --danger-bg: rgba(248, 113, 113, 0.10);

    --shadow-section: none;
    --shadow-card: none;
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.45);
    --border-section: 1px solid var(--border-default);
    --border-divider: 1px solid var(--border-default);

    --chart-area-fill: linear-gradient(
        180deg,
        rgba(45, 212, 167, 0.10) 0%,
        transparent 100%
    );

    /* Aliases legados */
    --bg-canvas: var(--bg-page);
    --bg-surface: var(--bg-card);
    --bg-hero: var(--bg-card);
    --ink-950: var(--text-primary);
    --ink-900: var(--text-primary);
    --ink-500: var(--text-secondary);
    --ink-300: var(--text-muted);
    --line: var(--border-default);
    --accent-soft: var(--accent-subtle);
    --gold: var(--warning);
    --positive: var(--success);
    --negative: var(--danger);

    --dv-bg: var(--bg-page);
    --dv-surface: var(--bg-card);
    --dv-border: var(--border-default);
    --dv-text: var(--text-primary);
    --dv-muted: var(--text-secondary);
    --dv-accent: var(--accent);
    --dv-accent-rgb: var(--accent-rgb);
}

/* ═══════════════════════════════════════════════════════════════
   Utilitários de superfície / tipo (consumo do DS)
   ═══════════════════════════════════════════════════════════════ */
.dpx-ds {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.dpx-pulse-dashboard,
body.dpx-pulse-dashboard .main-content {
    font-family: var(--font-ui);
    background-color: var(--bg-page);
    color: var(--text-primary);
}

.dpx-ds .font-display,
body.dpx-meridian-app .font-display,
.dpx-ds .dpx-ds-display {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dpx-ds .dpx-ds-data,
.dpx-ds :where(td, th, .dpx-ds-tabular),
body.dpx-meridian-app .dpx-ds-data,
body.dpx-meridian-app :where(.dpx-ds-tabular) {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.dpx-ds .dpx-ds-section-surface,
body.dpx-meridian-app .dpx-ds-section-surface {
    background: var(--bg-card);
    border: var(--border-section);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-section);
}

.dpx-ds .dpx-ds-surface-hero,
body.dpx-meridian-app .dpx-ds-surface-hero {
    background: var(--bg-card);
}

.dpx-ds .dpx-ds-divider,
body.dpx-meridian-app .dpx-ds-divider {
    border: none;
    border-bottom: var(--border-divider);
}

.dpx-ds .text-ink-950,
body.dpx-meridian-app .text-ink-950,
.dpx-ds .text-primary { color: var(--text-primary); }

.dpx-ds .text-ink-500,
body.dpx-meridian-app .text-ink-500,
.dpx-ds .text-secondary { color: var(--text-secondary); }

.dpx-ds .text-ink-300,
body.dpx-meridian-app .text-ink-300,
.dpx-ds .text-muted { color: var(--text-muted); }

.dpx-ds .text-accent,
body.dpx-meridian-app .text-accent { color: var(--accent); }

.dpx-ds .text-positive,
body.dpx-meridian-app .text-positive { color: var(--success); }

.dpx-ds .text-negative,
body.dpx-meridian-app .text-negative { color: var(--danger); }

.dpx-ds :where(button, input, select, textarea, .dpx-ds-control) {
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
}

.dpx-ds :where(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--border-strong);
}