/*
 * Tokens de design da Área do Cliente (S3R).
 * Paleta da marca: dourado (#FFCE09 / #D39C00 / #E4B118) + preto + branco.
 * O tema é controlado pelo atributo data-theme no <html> (ver js/theme.js).
 */
:root {
    color-scheme: light;

    /* Marca */
    --brand: #FFCE09;
    --brand-strong: #D39C00;
    --brand-hover: #E4B118;
    --brand-gradient: linear-gradient(135deg, #D39C00 0%, #FFCE09 100%);
    --brand-gradient-hover: linear-gradient(135deg, #C68F00 0%, #E4B118 100%);
    --brand-ink: #1f1a05;            /* texto sobre o dourado */
    --brand-text: #9a7000;           /* dourado legível sobre fundo claro */
    --brand-soft: rgba(255, 206, 9, 0.16);
    --brand-ring: rgba(255, 206, 9, 0.38);

    /* Superfícies e texto */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --surface-hover: #fbf7e8;
    --input-bg: #ffffff;
    --border: #e7e9ee;
    --border-strong: #d5d9e0;
    --text: #15171b;
    --muted: #6b7280;

    /* Sidebar (preto + dourado nos dois temas) */
    --sidebar-bg: #15171b;
    --sidebar-text: rgba(255, 255, 255, 0.78);
    --sidebar-hover: rgba(255, 255, 255, 0.07);

    /* Status */
    --success: #07ba7d;
    --success-soft: rgba(7, 186, 125, 0.14);
    --success-text: #047857;
    --warning: #f5a811;
    --warning-soft: rgba(245, 168, 17, 0.16);
    --warning-text: #a16207;
    --danger: #cf0723;
    --danger-soft: rgba(207, 7, 35, 0.12);
    --danger-text: #b4061f;

    /* Forma */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

    /* Camadas */
    --z-header: 1020;
    --z-sidebar-backdrop: 1025;
    --z-sidebar: 1030;
    --z-dialog: 1045;
    --z-modal-top: 1065;
    --z-alert: 1080;
    --z-loader: 2000;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

    --brand-text: #FFCE09;
    --brand-soft: rgba(255, 206, 9, 0.12);
    --brand-ring: rgba(255, 206, 9, 0.32);

    --bg: #0f1114;
    --surface: #1a1d21;
    --surface-2: #23272d;
    --surface-hover: #262a31;
    --input-bg: #121417;
    --border: #2c3138;
    --border-strong: #3a4049;
    --text: #e8eaed;
    --muted: #9aa1ab;

    --sidebar-bg: #121417;

    --success-text: #34d399;
    --warning-text: #fbbf24;
    --danger-text: #f87171;
    --success-soft: rgba(52, 211, 153, 0.14);
    --danger-soft: rgba(248, 113, 113, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Fallback caso o JS de tema ainda não tenha rodado */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #0f1114;
        --surface: #1a1d21;
        --text: #e8eaed;
        --muted: #9aa1ab;
    }
}

/* Botão de alternância de tema (usado nas três telas) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
    border-color: var(--brand-strong);
    background: var(--brand-soft);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.theme-toggle .material-icons {
    font-size: 20px;
}