/* ══════════════════════════════════════════════════════════════
   CASA FUSCO — Design Tokens
   Dirección: Industrial Premium
   Paleta: 5 colores — ink (obra), crema (papel), terracota (marca/acción),
   dorado (confianza/1970), slate (acero/depósito).
   Terracota reemplaza al naranja de seguridad original: mismo matiz,
   desaturado y oscurecido para leer "premium" en vez de "cartel de obra".
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Color — marca (naranja de obra, dirección flyer jul-2026)
     Dos niveles: --brand-vivid es el naranja de los flyers, SOLO para gráfica
     (franjas, badges con texto oscuro encima); --brand es la variante intensa
     que sí pasa AA (4.5:1) con texto blanco en botones y links. */
  --brand: #C2410C;
  --brand-dark: #9A3412;
  --brand-vivid: #F97316;
  --brand-soft: #FFEDD5;
  --brand-text: #C2410C; /* variante con margen de contraste para texto chico sobre fondos claros */

  /* Color — dorado (confianza, desde 1970, testimonios) */
  --gold: #C9A24B;
  --gold-soft: #E7D19C;
  --gold-line: rgba(201, 162, 75, .35);

  /* Color — slate industrial (acero, depósito, secundario frío) */
  --slate: #48505C;
  --slate-soft: #6B7280;
  --slate-line: rgba(72, 80, 92, .28);

  /* Color — neutrales cálidos (obra / papel) */
  --ink: #14110C;
  --ink-2: #201A12;
  --surface: #F5F2EC;
  --card: #FFFFFF;
  --line: #E7E1D3;
  --muted: #6E6A61;
  --soft: #F8F6F1;

  /* Color — semánticos */
  --ok: #1F8A4C;
  --ok-soft: #E9F5EE;
  --warn: #B87400;
  --warn-soft: #FDF4E1;
  --wa: #25D366;
  --wa-dark: #1DA855;
  --danger: #C0392B;

  /* Tipografía */
  --f-display: 'Barlow Condensed', sans-serif;
  --f-body: 'Barlow', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Escala tipográfica (clamp fluido) — títulos grandes, energía flyer */
  --fs-h1: clamp(36px, 7.2vw, 62px);
  --fs-h2: clamp(28px, 5.6vw, 44px);
  --fs-h3: clamp(20px, 3.4vw, 26px);
  --fs-body: 16px;
  --fs-small: 13.5px;

  /* Espaciado (escala 4/8) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radios */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;

  /* Motion — sutil, respeta reduced-motion */
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 550ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);

  /* Layout */
  --container: 1080px;
  --container-narrow: 720px;

  /* z-index */
  --z-nav: 100; --z-fab: 90; --z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}