/* Orange Construtora — Design System v2.3
   Colors + Type tokens. Source: DESIGN.md §2 + §3
   Fonts: see fonts/fonts.css for @import.

   v2.3.1 (2026-05-13) — Refactor por painel crítico (achado Atlas):
   - Camada Base → Semantic agora usa aliases referenciais (var()) em vez de hex duplicados.
   - Single-source-of-truth restaurado: mudar --orange-terracota propaga para --accent, --bg-orange-glow.
   - Tokens print isolados com prefixo --print-* (evita uso em digital).
   - Veredito: docs/orange-ds-review/individual/atlas.md
*/
@import url('fonts/fonts.css');

:root {
  /* ────────────────────────────────────────────────────────────
     CAMADA 1 — BASE (primitivos, raw values, nunca alias semantic)
     ──────────────────────────────────────────────────────────── */

  /* Brand Core (intocável) */
  --orange-terracota: #db543b;
  --orange-dark:      #1f221d;
  --orange-cream:     #faf4e4;

  /* Brand Core variants (derivados manuais — hex literais necessários, sem alpha CSS calc no momento) */
  --orange-terracota-hover:  #e8684f;
  --orange-terracota-active: #c4482f;
  --orange-terracota-deep:   #a83d28;

  /* Alpha helpers (para uso em accent-subtle, glow, overlays) */
  --orange-terracota-alpha-10: #db543b1a; /* ~10% */
  --orange-terracota-alpha-12: #db543b1f; /* ~12% */
  --orange-terracota-alpha-08: #db543b14; /* ~8% */

  /* Print-only (CMYK calibrated, ⛔ never in pixel digital — gate via stylelint sugerido) */
  --print-terracota: #e53837;
  --print-cream:     #f6f5dc;

  /* Legacy aliases (manter compat até refactor completo dos consumidores) */
  --brand-terracota-print: var(--print-terracota);
  --brand-cream-print:     var(--print-cream);

  /* Subtonalidades neutras */
  --neutral-olive:          #3d4138;
  --neutral-olive-elevated: #4a4e45;
  --neutral-warm-clay:      #5a4a36;
  --neutral-cream-deep:     #ede4cb;
  --neutral-stone:          #8f8a7c;

  /* Neutrais dark surface (subtons usados em backgrounds dark mode) */
  --neutral-dark-elevated:  #2a2d28;
  --neutral-dark-sunken:    #181a16;
  --neutral-dark-hover:     #33362f;
  --neutral-text-secondary: #d4cdbb;
  --neutral-text-disabled:  #5a564e;
  --neutral-border-strong:  #6b6f64;

  /* ────────────────────────────────────────────────────────────
     CAMADA 2 — SEMANTIC (intenção de uso, referencia base via var())
     ──────────────────────────────────────────────────────────── */

  /* Dark Mode (default — alma) */
  --bg-base:        var(--orange-dark);
  --bg-elevated:    var(--neutral-dark-elevated);
  --bg-sunken:      var(--neutral-dark-sunken);
  --bg-hover:       var(--neutral-dark-hover);
  --bg-orange-glow: var(--orange-terracota-alpha-12);

  --border-subtle:  var(--neutral-dark-hover);
  --border-default: var(--neutral-olive-elevated);
  --border-strong:  var(--neutral-border-strong);

  --text-primary:   var(--orange-cream);
  --text-secondary: var(--neutral-text-secondary);
  --text-muted:     var(--neutral-stone);
  --text-disabled:  var(--neutral-text-disabled);

  --accent:         var(--orange-terracota);
  --accent-hover:   var(--orange-terracota-hover);
  --accent-active:  var(--orange-terracota-active);
  --accent-subtle:  var(--orange-terracota-alpha-10);

  /* Status */
  --success: #6b8e3d;
  --warning: #d4a24c;
  --danger:  #c44536;
  --info:    #6b8a9e;

  /* Personas */
  --persona-cliente:    #6b8a9e;
  --persona-corretor:   #6b8e3d;
  --persona-fornecedor: #d4a24c;
  --persona-interno:    #db543b;

  /* Spacing 4px base */
  --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-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Elevation (used sparingly) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.18);
  --shadow-2: 0 6px 18px rgba(0,0,0,.28);
  --shadow-3: 0 24px 48px rgba(0,0,0,.42);

  /* Type scale (desktop) */
  --text-display-3xl: 128px;
  --text-display-2xl: 96px;
  --text-display-xl:  72px;
  --text-display-lg:  56px;
  --text-display-md:  40px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-h4: 16px;
  --text-body-lg: 18px;
  --text-body:    15px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-micro:   12px;
  --text-metric-xl: 48px;
  --text-metric-lg: 32px;
  --text-metric-md: 24px;
  --text-mono-sm: 13px;
  --text-mono-xs: 11px;

  /* Motion */
  --ease-editorial: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-norm: 200ms;
  --dur-slow: 400ms;
  --dur-edit: 600ms;
}

/* ────────────────────────────────────────────────────────────
   MODE OVERRIDES — Light & Orange
   Override apenas tokens semantic; aliases base ficam intactos.
   ──────────────────────────────────────────────────────────── */

/* Light mode override (Use em superficies claras: cream surface) */
[data-mode="light"] {
  /* Surfaces */
  --bg-base:        var(--orange-cream);
  --bg-elevated:    #ffffff;        /* white surface elevation — único caso de #fff permitido (ver §17.2) */
  --bg-sunken:      #f2ead6;        /* cream-sunken hex literal (sub-paleta light, sem alias base) */
  --bg-hover:       var(--neutral-cream-deep);

  /* Borders */
  --border-subtle:  #e5dcc4;        /* cream-border-subtle, sub-paleta light */
  --border-default: #c9bf9f;        /* cream-border-default, sub-paleta light */
  --border-strong:  var(--neutral-stone);

  /* Text */
  --text-primary:   var(--orange-dark);
  --text-secondary: var(--neutral-olive);
  --text-muted:     #6b6f64;        /* sub-paleta light muted */

  /* Accent — sobre cream, terracota precisa peso maior (§17.2 linha 1283: #a83d28 6.3:1 AAA) */
  --accent-hover:   var(--orange-terracota-active);
  --accent-active:  var(--orange-terracota-deep);
  --accent-subtle:  var(--orange-terracota-alpha-08);
}

/* Campaign mode (terracota chapado total — RESTRITO a contextos de campanha/OOH/impresso)

   ✅ ADR-001 ACEITA: Opção 3 — Modo Orange RESTRINGIDO a campaign / OOH / splash / impresso institucional.
      NUNCA usar em UI funcional de produto (app, dashboard, formulários).

   ⚠️ CRÍTICO: Modo Campaign tem contraste limítrofe — só usar com guardrail.
   - --text-muted (cream com opacidade 0.65) tem ratio 2.9:1 sobre terracota → FALHA AA Normal
   - Use APENAS em texto >= 18px (AA Large passa em 4.4:1)
   - Stylelint rule sugerida (ver .stylelintrc.campaign.json) bloqueia uso em font-size < 18px.

   Seletores aceitos (ambos funcionam — alias retro-compatível):
   - [data-surface="campaign"]  (preferido — semântico claro)
   - [data-mode="orange"]        (legacy — manter compat com previews existentes)
*/
[data-surface="campaign"],
[data-mode="orange"] {
  --bg-base:        var(--orange-terracota);
  --bg-elevated:    var(--orange-terracota-active);
  --bg-sunken:      var(--orange-terracota-deep);

  --text-primary:   var(--orange-cream);
  --text-secondary: #f6eed8;                       /* cream-secondary sobre terracota */
  --text-muted:     rgba(250, 244, 228, 0.65);     /* ⚠️ Apenas >=18px (§17.2 L1292) */
  --border-subtle:  rgba(250, 244, 228, 0.18);

  --accent:         var(--orange-cream);            /* inverte — cream é o destaque sobre terracota */
}

/* ── Brand mark utility ─────────────────────────────────────────
   Use `.brand-mark` on a sized element to render the Orange mark
   in any color via the current `color` value. The PNG is the
   official Canva artwork; CSS mask gives us tint flexibility.
   --------------------------------------------------------------- */
.brand-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('assets/orange-mark.png') center/contain no-repeat;
          mask: url('assets/orange-mark.png') center/contain no-repeat;
}

/* ── Semantic typography ── */
html { color: var(--text-primary); background: var(--bg-base); font-family: var(--font-body); }

h1, .h1, h2, .h2, h3, .h3,
.display-3xl, .display-2xl, .display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.display-3xl { font-size: var(--text-display-3xl); line-height: .95; letter-spacing: -.03em; }
.display-2xl { font-size: var(--text-display-2xl); line-height: 1;    letter-spacing: -.03em; }
.display-xl  { font-size: var(--text-display-xl);  line-height: 1.05; letter-spacing: -.015em; }
.display-lg  { font-size: var(--text-display-lg);  line-height: 1.1;  letter-spacing: -.015em; }
.display-md  { font-size: var(--text-display-md);  line-height: 1.15; letter-spacing: -.01em; }
h1, .h1      { font-size: var(--text-h1); line-height: 1.2;  letter-spacing: -.01em; }
h2, .h2      { font-size: var(--text-h2); line-height: 1.25; letter-spacing: -.01em; }
h3, .h3      { font-size: var(--text-h3); line-height: 1.3;  letter-spacing: -.01em; }
h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h4); line-height: 1.4; text-transform: none; }

p, .body { font-size: var(--text-body); line-height: 1.6; }
.body-lg { font-size: var(--text-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--text-body-sm); line-height: 1.5; }
.caption { font-size: var(--text-caption); line-height: 1.45; color: var(--text-muted); }

.eyebrow, .micro {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.mono       { font-family: var(--font-mono); font-size: var(--text-mono-sm); }
.mono-xs    { font-family: var(--font-mono); font-size: var(--text-mono-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.metric-xl  { font-family: var(--font-mono); font-size: var(--text-metric-xl); line-height: 1; letter-spacing: -.01em; font-weight: 500; }
.metric-lg  { font-family: var(--font-mono); font-size: var(--text-metric-lg); line-height: 1; letter-spacing: -.01em; font-weight: 500; }
.metric-md  { font-family: var(--font-mono); font-size: var(--text-metric-md); line-height: 1; letter-spacing: -.01em; font-weight: 500; }

/* The colored <em> exception inside display */
.display-3xl em, .display-2xl em, .display-xl em, .display-lg em, .display-md em {
  color: var(--accent); font-style: normal; font-weight: 400;
}

/* Descriptor "CONSTRUTORA" style — recreated outside the logo */
.descritor {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: var(--text-mono-xs);
  color: var(--text-secondary);
}