/* =========================================================
   ZoomCalc3D — Sistema de Temas (Claro / Escuro)
   ---------------------------------------------------------
   Toda a paleta "slate" e os acentos do Tailwind sao servidos
   por variaveis CSS (ver theme.js). Trocar o tema = trocar os
   valores abaixo. Nenhuma classe precisa de prefixo "dark:".
   ========================================================= */

/* ---------- TEMA ESCURO (padrao) ---------- */
:root {
    color-scheme: dark;

    /* Escala neutra */
    --s-50:  248 250 252;
    --s-100: 241 245 249;
    --s-200: 226 232 240;
    --s-300: 203 213 225;
    --s-400: 148 163 184;
    --s-500: 100 116 139;
    --s-600: 71 85 105;
    --s-700: 51 65 85;
    --s-800: 30 41 59;
    --s-850: 30 41 59;
    --s-900: 15 23 42;
    --s-950: 2 6 23;
    --c-white: 255 255 255;

    /* Acentos */
    --cy-200: 165 243 252;  --cy-300: 103 232 249;  --cy-400: 34 211 238;
    --cy-500: 6 182 212;    --cy-900: 22 78 99;     --cy-950: 8 51 68;

    --em-300: 110 231 183;  --em-400: 52 211 153;   --em-500: 16 185 129;
    --em-600: 5 150 105;    --em-900: 6 78 59;      --em-950: 2 44 34;

    --fu-400: 232 121 249;  --fu-500: 217 70 239;   --fu-900: 112 26 117;

    --rd-400: 248 113 113;  --rd-500: 239 68 68;    --rd-900: 127 29 29;
    --rd-950: 69 10 10;

    --am-400: 251 191 36;   --am-500: 245 158 11;
    --yl-500: 234 179 8;    --yl-900: 113 63 18;
    --bl-400: 96 165 250;   --bl-500: 59 130 246;
    --or-400: 251 146 60;   --or-500: 249 115 22;
    --gr-400: 74 222 128;
    --pu-400: 192 132 252;  --pu-500: 168 85 247;   --pu-900: 88 28 135;
    --pk-500: 236 72 153;

    /* Superficies e efeitos */
    --page-bg: #020617;
    --grid-line: rgba(6, 182, 212, 0.05);
    --panel-bg: rgba(15, 23, 42, 0.7);
    --panel-border: rgba(30, 41, 59, 0.5);
    --panel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --scrim: rgba(2, 6, 23, 0.8);
    --range-track: #1e293b;
    --scroll-thumb: #334155;
    --scroll-thumb-hover: #475569;
    --logo-filter: brightness(0) invert(1);
}

/* ---------- TEMA CLARO ---------- */
:root[data-theme="light"] {
    color-scheme: light;

    /* Escala neutra invertida: 950 = fundo da pagina, 900 = cartoes */
    --s-50:  15 23 42;
    --s-100: 30 41 59;
    --s-200: 30 41 59;
    --s-300: 51 65 85;
    --s-400: 71 85 105;
    --s-500: 100 116 139;
    --s-600: 120 134 154;
    --s-700: 203 213 225;
    --s-800: 226 232 240;
    --s-850: 241 245 249;
    --s-900: 255 255 255;
    --s-950: 241 245 249;
    --c-white: 15 23 42;

    /* Acentos escurecidos para contraste sobre branco.
       Os tons 900/950 sao usados APENAS como fundo translucido (bg-x-900/20 etc.):
       no claro eles viram o tom medio, para render como pastel limpo em vez de lama. */
    --cy-200: 22 78 99;     --cy-300: 22 78 99;     --cy-400: 14 116 144;
    --cy-500: 21 94 117;    --cy-900: 6 182 212;    --cy-950: 6 182 212;

    --em-300: 6 78 59;      --em-400: 4 120 87;     --em-500: 6 95 70;
    --em-600: 6 78 59;      --em-900: 16 185 129;   --em-950: 16 185 129;

    --fu-400: 162 28 175;   --fu-500: 134 25 143;   --fu-900: 217 70 239;

    --rd-400: 185 28 28;    --rd-500: 185 28 28;    --rd-900: 239 68 68;
    --rd-950: 239 68 68;

    --am-400: 180 83 9;     --am-500: 146 64 14;
    --yl-500: 133 77 14;    --yl-900: 234 179 8;
    --bl-400: 29 78 216;    --bl-500: 29 78 216;
    --or-400: 194 65 12;    --or-500: 154 52 18;
    --gr-400: 21 128 61;
    --pu-400: 126 34 206;   --pu-500: 107 33 168;   --pu-900: 168 85 247;
    --pk-500: 190 24 93;

    /* Superficies e efeitos */
    --page-bg: #f1f5f9;
    --grid-line: rgba(14, 116, 144, 0.06);
    --panel-bg: rgba(255, 255, 255, 0.92);
    --panel-border: rgba(203, 213, 225, 0.9);
    --panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    --scrim: rgba(15, 23, 42, 0.35);
    --range-track: #cbd5e1;
    --scroll-thumb: #cbd5e1;
    --scroll-thumb-hover: #94a3b8;
    --logo-filter: brightness(0);
}

/* ---------- SUPERFICIES BASE ---------- */
body {
    background-color: var(--page-bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    transition: background-color .25s ease, color .25s ease;
}

.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Logo: invertido no escuro, solido no claro */
.logo-adaptive { filter: var(--logo-filter); }

/* Fundo dos modais: bem escuro no tema escuro, veu suave no claro */
.modal-overlay { background: var(--scrim); }

/* ---------- CONTROLES ---------- */
.neon-border-focus:focus-within {
    border-color: rgb(var(--cy-500));
    box-shadow: 0 0 0 4px rgb(var(--cy-500) / 0.12);
}

.range-slider { -webkit-appearance: none; appearance: none; background: transparent; }
.range-slider::-webkit-slider-runnable-track {
    width: 100%; height: 4px; background: var(--range-track); border-radius: 2px;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
    background: rgb(var(--cy-500)); margin-top: -6px;
    box-shadow: 0 0 10px rgb(var(--cy-500) / 0.5);
}
.range-slider::-moz-range-track {
    width: 100%; height: 4px; background: var(--range-track); border-radius: 2px;
}
.range-slider::-moz-range-thumb {
    height: 16px; width: 16px; border-radius: 50%; border: 0;
    background: rgb(var(--cy-500));
    box-shadow: 0 0 10px rgb(var(--cy-500) / 0.5);
}

#proj-margin::-webkit-slider-thumb {
    background: rgb(var(--em-500));
    box-shadow: 0 0 10px rgb(var(--em-500) / 0.5);
}
#proj-margin::-moz-range-thumb {
    background: rgb(var(--em-500));
    box-shadow: 0 0 10px rgb(var(--em-500) / 0.5);
}

/* Campo numerico sem as setinhas nativas */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; appearance: textfield; }

/* ---------- SCROLLBARS ---------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb); border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- BOTAO DE TEMA ----------
   Icones em SVG inline (nao dependem do lucide): so um aparece por vez.
   Estado padrao = escondido; a regra do tema ativo revela o certo. */
.theme-ico { display: none; line-height: 0; }
:root:not([data-theme="light"]) .theme-ico-dark { display: block; }
:root[data-theme="light"] .theme-ico-light { display: block; }

/* ---------- IMPRESSAO ---------- */
@media print {
    body { background: #fff !important; background-image: none !important; color: #000 !important; }
    #app-ui { display: none !important; }
    #proposal-view { display: block !important; }
}