/*
 * DESIGN TOKENS — Excavaciones BCN
 * ─────────────────────────────────
 * Paleta: TIERRA Y ÁMBAR
 *
 * Justificación cromática:
 * El sector de excavaciones en Barcelona trabaja con tierra, arcilla y roca calcárea.
 * La paleta traduce ese material en color: fondo casi negro con un subtono cálido
 * (como la tierra comprimida en profundidad), y el ámbar-naranja como color principal
 * (el color de la maquinaria pesada, de las luces de advertencia de excavadoras Caterpillar,
 * y de la tierra barcelonesa seca al sol). Es una paleta inesperada para el sector
 * — la mayoría de competidores usa azul corporativo genérico — lo que hace que
 * Excavaciones BCN destaque de inmediato.
 *
 * No es la paleta refleja por defecto de la IA (crema/beige/arena). Es tierra de verdad.
 */

:root {
  /* ── Paleta base ── */
  --color-background:      #0C0A06;   /* Tierra comprimida, profundidad */
  --color-surface:         #18140C;   /* Superficie oscura cálida */
  --color-surface-raised:  #241D10;   /* Tarjeta elevada */
  --color-surface-overlay: #2E2415;   /* Overlay, modales */

  /* ── Marca ── */
  --color-primary:         #D4750A;   /* Ámbar tierra — maquinaria, suelo barcelonés */
  --color-primary-dark:    #A85A05;   /* Ámbar oscuro — hover, depth */
  --color-primary-light:   #E8921A;   /* Ámbar claro — hover states */
  --color-accent:          #F5A623;   /* Amarillo construcción — CTAs, highlights */
  --color-accent-glow:     rgba(245, 166, 35, 0.25);

  /* ── Texto ── */
  --color-text:            #F0E6D0;   /* Blanco cálido — polvo de caliza */
  --color-text-secondary:  #B8A88A;   /* Tono muted cálido */
  --color-text-muted:      #7A6A52;   /* Muy apagado, metadatos */
  --color-text-inverse:    #0C0A06;

  /* ── Bordes ── */
  --color-border:          #2E2415;
  --color-border-subtle:   #1E1A0F;
  --color-border-emphasis: #4A3820;

  /* ── Estados ── */
  --color-success:         #4CAF7D;
  --color-error:           #E05252;
  --color-warning:         #F5A623;

  /* ── Tipografía ── */
  --font-display: 'Barlow Condensed', sans-serif;  /* Industrial, condensado, bold — perfecto para excavación */
  --font-body:    'Barlow', sans-serif;             /* Mismo family, readable, neutro con carácter */

  /* ── Escala tipográfica modular (ratio 1.333 — cuarta perfecta) ── */
  --text-xs:   0.563rem;   /*  9px  */
  --text-sm:   0.75rem;    /* 12px  */
  --text-base: 1rem;       /* 16px  */
  --text-lg:   1.125rem;   /* 18px  */
  --text-xl:   1.333rem;   /* 21px  */
  --text-2xl:  1.777rem;   /* 28px  */
  --text-3xl:  2.369rem;   /* 38px  */
  --text-4xl:  3.157rem;   /* 51px  */
  --text-5xl:  4.209rem;   /* 67px  */
  --text-6xl:  clamp(3.5rem, 8vw, 6rem);
  --text-hero: clamp(4rem, 12vw, 9rem);

  /* ── Pesos ── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* ── Interlineado ── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ── Espaciado (base 4px) ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* ── Radios ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.6);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px rgba(212, 117, 10, 0.35);
  --shadow-glow-sm: 0 0 16px rgba(212, 117, 10, 0.25);
  --shadow-accent-glow: 0 0 40px rgba(245, 166, 35, 0.3);

  /* ── Transiciones ── */
  --transition-fast:   150ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-base:   300ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slower: 900ms cubic-bezier(0.16, 1, 0.3, 1);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-cursor:   9999;

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
  --container-max: 1440px;

  /* ── Navbar ── */
  --navbar-height: 72px;
}