/* =========================================================
   Tokens do redesign (fonte: docs/redesign/GUIA_VISUAL.md)
   Todo CSS novo usa estas variáveis; não repita valores soltos.
   ========================================================= */
:root {
    /* Fonte */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

    /* Superfícies e texto */
    --bg-page: #F5F5F7;
    --bg-surface: #FFFFFF;
    --bg-grouped: #FBFBFD;
    --text: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #8E8E93;          /* só placeholder/desabilitado */
    --separator: rgba(0, 0, 0, .08);
    --fill-control: rgba(118, 118, 128, .12);
    --fill-control-hover: rgba(118, 118, 128, .18);

    /* Accent (Safira) */
    --accent: #0A64D6;
    --accent-hover: #0857BD;
    --accent-tint: rgba(10, 100, 214, .10);
    --accent-text: #0A64D6;
    --focus-ring: 0 0 0 4px rgba(10, 100, 214, .25);

    /* Blocos escuros */
    --dark-bg: #0B0F17;
    --dark-text: #F5F5F7;
    --dark-text-secondary: #A1A1A6;

    /* Ações */
    --whatsapp: #1A8D4A;
    --whatsapp-hover: #157A3F;
    --danger: #C2261C;
    --danger-tint: #FDECEA;
    --success: #1F7A3A;
    --success-tint: #E6F4EA;

    /* Status do orçamento (texto / fundo) */
    --status-novo: #0A64D6;            --status-novo-bg: #E8F1FD;
    --status-em-atendimento: #A15C00;  --status-em-atendimento-bg: #FFF3DE;
    --status-medicao-agendada: #6E3FD1; --status-medicao-agendada-bg: #F1ECFD;
    --status-fechado: #1F7A3A;         --status-fechado-bg: #E6F4EA;
    --status-cancelado: #C2261C;       --status-cancelado-bg: #FDECEA;

    /* Entrega (texto / fundo) */
    --entrega-atrasado: var(--status-cancelado);      --entrega-atrasado-bg: var(--status-cancelado-bg);
    --entrega-hoje: var(--status-em-atendimento);     --entrega-hoje-bg: var(--status-em-atendimento-bg);
    --entrega-amanha: var(--status-novo);             --entrega-amanha-bg: var(--status-novo-bg);
    --entrega-futuro: #6E6E73;                        --entrega-futuro-bg: rgba(118, 118, 128, .12);

    /* Material translúcido */
    --material-bg: rgba(251, 251, 253, .72);
    --material-filter: blur(20px) saturate(180%);
    --scrim: rgba(0, 0, 0, .32);

    /* Raios */
    --radius-control: 10px;
    --radius-field: 12px;
    --radius-card: 20px;
    --radius-panel: 28px;
    --radius-pill: 980px;

    /* Sombras */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-sheet: 0 24px 64px rgba(0, 0, 0, .18);
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, .12);
    --shadow-edge: 0 1px 0 rgba(0, 0, 0, .06);   /* borda sutil de chrome */

    /* Espaçamento (base 4/8) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* Tamanhos */
    --tap: 44px;              /* alvo de toque mínimo / altura de campo */
    --sidebar-width: 248px;

    /* Tipografia: tamanho / altura de linha / peso / tracking */
    --fs-display: 64px;  --lh-display: 1.05; --fw-display: 700; --ls-display: -0.03em;
    --fs-large: 40px;    --lh-large: 1.1;    --fw-large: 700;   --ls-large: -0.025em;
    --fs-title: 28px;    --lh-title: 1.15;   --fw-title: 700;   --ls-title: -0.02em;
    --fs-headline: 20px; --lh-headline: 1.25; --fw-headline: 600; --ls-headline: -0.015em;
    --fs-body: 17px;     --lh-body: 1.47;    --fw-body: 400;    --ls-body: -0.01em;
    --fs-callout: 15px;  --lh-callout: 1.4;  --fw-callout: 500; --ls-callout: -0.005em;
    --fs-footnote: 13px; --lh-footnote: 1.38; --fw-footnote: 400; --ls-footnote: 0;
    --fs-caption: 12px;  --lh-caption: 1.33; --fw-caption: 500; --ls-caption: 0.01em;
    --ls-section-label: 0.06em;   /* rótulo de seção em CAPS: 12px 600 */

    /* Movimento */
    --ease-spring: cubic-bezier(.32, .72, 0, 1);
    --ease-out: ease-out;
    --dur-press: 100ms;
    --dur-fast: .25s;
    --dur-move: .4s;
    --press-scale: .97;

    /* Editor de ilustrações (palco quadriculado, prévias e esqueleto de carregamento) */
    --canvas-bg: #FBFBFD;
    --canvas-grid: rgba(0, 0, 0, .045);
    --selection-fill: rgba(10, 100, 214, .08);   /* hover da folha no palco */
    --preview-sky-top: #EEF3F7;                  /* fundo da prévia "no simulador" */
    --preview-sky-bottom: #F8FAFB;
    --paper-edge: rgba(0, 0, 0, .1);             /* borda da folha impressa */
    --swatch-edge: rgba(0, 0, 0, .18);
    --skeleton-a: #ECECEF;
    --skeleton-b: #F6F6F8;
}

/* Utilitários tipográficos (opcionais) */
.t-display  { font-size: var(--fs-display);  line-height: var(--lh-display);  font-weight: var(--fw-display);  letter-spacing: var(--ls-display); }
.t-large    { font-size: var(--fs-large);    line-height: var(--lh-large);    font-weight: var(--fw-large);    letter-spacing: var(--ls-large); }
.t-title    { font-size: var(--fs-title);    line-height: var(--lh-title);    font-weight: var(--fw-title);    letter-spacing: var(--ls-title); }
.t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-headline); letter-spacing: var(--ls-headline); }
.t-body     { font-size: var(--fs-body);     line-height: var(--lh-body);     font-weight: var(--fw-body);     letter-spacing: var(--ls-body); }
.t-callout  { font-size: var(--fs-callout);  line-height: var(--lh-callout);  font-weight: var(--fw-callout);  letter-spacing: var(--ls-callout); }
.t-footnote { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-footnote); letter-spacing: var(--ls-footnote); }
.t-caption  { font-size: var(--fs-caption);  line-height: var(--lh-caption);  font-weight: var(--fw-caption);  letter-spacing: var(--ls-caption); }
.t-section-label { font-size: 12px; font-weight: 600; letter-spacing: var(--ls-section-label); text-transform: uppercase; color: var(--text-secondary); }
.tabular { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    :root {
        --fs-display: 40px;
        --fs-large: 32px;
        --fs-title: 24px;
    }
}

/* Preferências do sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root { --material-bg: #FBFBFD; }
    .material {
        background: #FBFBFD !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --text-secondary: #3A3A3C;
        --separator: rgba(0, 0, 0, .24);
        --fill-control: rgba(118, 118, 128, .24);
        --accent: #0050B3;
        --accent-text: #0050B3;
        --material-bg: #FBFBFD;
    }
    .material {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}