/* ============================================================
   global.css — ÚNICA fuente de verdad de COLORES y TOKENS de diseño.
   Solo define el diccionario: primitivas (nivel 1), roles semánticos
   (nivel 2) y los temas por variante. NADA de clases custom acá — eso
   vive en app.css. Los componentes usan SIEMPRE los roles (bg-brand,
   text-fg, text-muted…), nunca las primitivas directamente.
   ============================================================ */

@theme {
  /* ----------------------------------------------------------
     NIVEL 1 · PRIMITIVAS — colores crudos, no cambian entre temas.
     ---------------------------------------------------------- */

  /* Marca · gama sky (base de la Home / Pools) */
  --color-sky: #3bb6f2;
  --color-sky-light: #67c6f4;
  --color-sky-bright: #ace4ff;
  --color-sky-deep: #1e779a;
  --color-sky-pale: #d6f1ff;

  /* Cálidos · gama sand-warm — banda "Service Areas", Nav, CTAs primarios */
  --color-warm-surface: #716655;
  --color-warm-surface-2: #8f7348;
  --color-warm-line: #9f8355;
  --color-honey: #ffe3ac;
  --color-gold: #f2c94c;

  /* Fríos · superficies azul-oscuro de la Home */
  --color-deep-1: #28363e;
  --color-deep-2: #304f60;
  --color-deep-3: #1a323d;
  --color-deep-line: #3e5c70;
  --color-deep-muted: #b0cdd4;
  --color-deep-muted-2: #7b98a8;

  /* Neutrales crema */
  --color-cream: #f5f0e8;
  --color-cream-2: #ede8dc;
  --color-sand: #d4c8b0;
  --color-sand-muted: #b8a88a;

  /* Taupe profundo — tinte del tema "concrete overlay" del hero slider. Es el
     único tema del slider sin gama previa (pool→sky, patio/driveway→warm); los
     demás reusan primitivas existentes. Ver --color-hero-* abajo. */
  --color-clay-deep: #4a453b;

  /* ----------------------------------------------------------
     NIVEL 2 · ROLES semánticos — default de la Home.
     Cambiar de tema = re-apuntar estos roles (ver bloques de tema).
     ---------------------------------------------------------- */
  --color-brand: var(--color-sky);
  --color-brand-light: var(--color-sky-light);
  --color-brand-bright: var(--color-sky-bright);
  --color-brand-deep: var(--color-sky-deep);

  --color-surface: var(--color-deep-1);
  --color-surface-2: var(--color-deep-2);
  --color-surface-3: var(--color-deep-3);

  --color-fg: var(--color-cream);
  --color-fg-2: var(--color-cream-2);

  --color-muted: var(--color-deep-muted);
  --color-muted-2: var(--color-deep-muted-2);

  --color-line: var(--color-deep-line);

  /* Hero slider · tinte del gradiente de fondo por tema del slide (item 01).
     Reusan la paleta existente salvo `overlay` (ver --color-clay-deep). El
     mapeo tema→token lo consume .banner-gradient en app.css vía :has(). */
  --color-hero-pool: var(--color-sky-deep);
  --color-hero-patio: var(--color-warm-surface-2);
  --color-hero-driveway: var(--color-warm-surface);
  --color-hero-overlay: var(--color-clay-deep);

  /* Mega-menú de servicios · color por COLUMNA/vertical (item 05). ÚNICA fuente del
     color-por-columna: ServiceVertical::accentToken() devuelve el NOMBRE de uno de
     estos tokens; el panel lo emite como una sola custom property (--menu-accent) y
     app.css lo consume con reglas genéricas (fondo tintado, título, hover del ítem).
     Reusan primitivas existentes (sky = Pools, warm/terra = Hardscape) — cero hex
     nuevos. Cambiar el color de una columna = re-apuntar el token acá. */
  --color-menu-pools: var(--color-sky-deep);
  --color-menu-hardscape: var(--color-warm-surface-2);

  /* Hero de galería · color de ACENTO por categoría (item 07). ÚNICA fuente del
     color-por-categoría: el enum GalleryCategory::accentToken() devuelve el nombre
     de uno de estos tokens; el hero lo emite como --gallery-accent y app.css lo
     consume con reglas genéricas (gradiente de fondo, borde del link activo,
     select mobile). Elegidos claros/saturados para leer sobre el gradiente oscuro.
     Reusan primitivas existentes (cero hex nuevos). Agregar categoría = token acá
     sólo si el color es nuevo. */
  --color-gallery-pools: var(--color-sky-light);
  --color-gallery-patios: var(--color-honey);
  --color-gallery-driveways: var(--color-gold);
  --color-gallery-overlays: var(--color-sand);

  /* Breakpoint custom `xs` (item 06) — 480px. Habilita el variant `xs:` de Tailwind
     para la tabla de teléfonos del header: ≥480px muestra el botón texto+número,
     <480px lo reemplaza por el link tel: sólo-ícono. Portado de Apex. */
  --breakpoint-xs: 30rem;

  /* Type */
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-display: 'Anton', sans-serif;
}