/* ============================================================
   Cota3D — tokens que NAO mudam com o tema ("Camada por camada").
   As cores ficam em config/theme.php e chegam como --c-<nome>.
   Carregue este arquivo DEPOIS de app.css:
       <link rel="stylesheet" href="/css/app.css?v=...">
       <link rel="stylesheet" href="/css/tokens.css?v=...">
   Fonte da verdade: DESIGN.md. Copia de referencia: design-system/tokens.css.
   ============================================================ */

@import url("/fonts/fonts.css");

:root {
    /* Espacamento */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-26: 26px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --gutter: clamp(16px, 4vw, 48px);

    /* Raio — blocos grandes 32, cartões 26, painéis internos 20, campos 14 */
    --radius-xl: 32px;
    --radius: 26px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --radius-pill: 999px;

    /* Layout */
    --maxw: 1344px;
    --maxw-wide: 1440px;
    --maxw-read: 760px;
    --header-h: 72px;
    --panel-nav-h: 50px;
    --side-w: 264px;
    --imp-bar-h: 40px;
    --card-min: 280px;
    --auth-w: 460px;
    --prose-w: 760px;
    --field-h: 48px;

    /* Sombra — só em elevação real (hover de cartão, botão de ação, sobreposições) */
    --shadow-card: 0 24px 40px -18px rgba(14, 15, 12, 0.35);
    --shadow-btn: 0 6px 18px -6px color-mix(in srgb, var(--c-primary) 60%, transparent);
    --shadow-btn-hover: 0 10px 24px -6px color-mix(in srgb, var(--c-primary) 70%, transparent);
    --shadow-photo: 0 20px 40px -14px rgba(0, 0, 0, 0.8);
    --shadow-overlay: 0 20px 50px -12px rgba(14, 15, 12, 0.45);

    /* Familias */
    --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
    --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-brand: var(--font-display);

    /* Movimento */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: .18s;
    --dur: .3s;
    --dur-slow: .6s;

    /* Medidor de camadas: cada barra é uma fatia das cotas */
    --layer-w: 5px;
    --layer-gap: 3px;

    /* Gradientes: o sistema novo é chapado — mantidos para compatibilidade, viram a cor de ação */
    --grad: var(--c-primary);
    --grad-btn: var(--c-primary);
}

/* ---------- Escala tipografica ----------
   Display (Bricolage ExtraBold) nos títulos; Geist no texto; Geist Mono nas
   etiquetas pequenas em maiúsculas e nos números; Instrument Serif itálico só
   no destaque dentro de um título (<em>).
   ---------------------------------------- */
/* Títulos */
.hero { font-family: var(--font-display); font-size: clamp(2.5rem, 6.4vw, 5.75rem); line-height: .95; font-weight: 800; letter-spacing: -.03em; }
.detail-title { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -.025em; }
.page-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.auth-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; }
.block-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.section-title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.card-title { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }

/* Texto */
.body { font-family: var(--font-ui); font-size: 1rem; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-ui); font-size: .875rem; line-height: 1.5; font-weight: 400; }
.micro { font-family: var(--font-ui); font-size: .8rem; line-height: 1.45; font-weight: 400; }

/* Dados */
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-big { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-stat-num { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-value { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.code-sm { font-family: var(--font-mono); font-size: .85rem; line-height: 1.5; font-weight: 400; }

/* Interface */
.button-label { font-family: var(--font-ui); font-size: .94rem; line-height: 1.2; font-weight: 600; }
.nav-item { font-family: var(--font-ui); font-size: .9rem; line-height: 1.2; font-weight: 500; }
.badge { font-family: var(--font-mono); font-size: .66rem; line-height: 1; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow { font-family: var(--font-mono); font-size: .7rem; line-height: 1.2; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.price-label { font-family: var(--font-mono); font-size: .66rem; line-height: 1.2; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.table-head { font-family: var(--font-mono); font-size: .68rem; line-height: 1.3; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }