/* =========================================================================
   SOLET — Design tokens  ·  TEMA CLARO
   -------------------------------------------------------------------------
   Paleta extraída píxel a píxel del logo oficial (Logo_Solet_350x88.png):
     #44AC34  verde   — wordmark "SOLET"      -> color primario de marca
     #0085C8  azul    — cara izquierda cubos  -> color secundario
     #F9B221  ámbar   — cara superior cubos   -> acento "chispa eléctrica"
     #CA222C  rojo    — cara derecha cubos    -> acento de protección

   Todo el color del sitio sale de este fichero. Los demás CSS no llevan
   valores literales: usan estas variables. Cambiar el tema es cambiar aquí.
   ========================================================================= */

:root {
  /* ---- Marca (valores exactos del logo) ---- */
  --brand-green: #44ac34;
  --brand-blue: #0085c8;
  --brand-amber: #f9b221;
  --brand-red: #ca222c;

  /* ---- Escalas derivadas ---- */
  --green-400: #5fcb4a;
  --green-500: #44ac34;
  --green-600: #338526;
  --green-700: #26701b;

  --blue-400: #34a8e4;
  --blue-500: #0085c8;
  --blue-700: #00618f;

  --amber-400: #ffc23d;
  --amber-500: #f9b221;
  --amber-700: #8a6100;

  --red-500: #ca222c;
  --red-700: #b01b24;

  /* ---- Papel: la base clara sobre la que vive todo ---- */
  --paper-0: #ffffff;   /* tarjetas y paneles elevados */
  --paper-1: #f7f9fa;   /* fondo de página */
  --paper-2: #eef2f5;   /* bandas alternas, footer, rellenos */
  --paper-3: #e3e9ed;   /* separadores marcados */

  /* ---- Tinta: grafito azulado, nunca negro puro ---- */
  --ink-900: #08111a;   /* titulares */
  --ink-800: #0f1b24;
  --ink-700: #23323c;
  --ink-600: #3d4f5b;   /* cuerpo de texto */
  --ink-500: #5f727e;   /* apagado */
  --ink-400: #8598a4;   /* sólo decorativo, nunca texto suelto */

  --text-hi: var(--ink-900);
  --text: var(--ink-600);
  --text-mid: var(--ink-500);
  --text-low: var(--ink-500);

  /* ---- Superficies y líneas ---- */
  --surface: var(--paper-1);
  --surface-2: var(--paper-2);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-2);

  --hairline: rgba(11, 26, 36, 0.13);
  --hairline-strong: rgba(11, 26, 36, 0.28);
  --hairline-soft: rgba(11, 26, 36, 0.07);

  /* Vidrio del header y de los paneles flotantes */
  --glass: rgba(255, 255, 255, 0.92);
  --glass-solid: rgba(255, 255, 255, 0.97);

  /* Sombras: en tema claro sustituyen al "glow" del tema oscuro */
  --shadow-sm: 0 1px 2px rgba(11, 26, 36, 0.06), 0 2px 8px -4px rgba(11, 26, 36, 0.08);
  --shadow-md: 0 2px 6px rgba(11, 26, 36, 0.06), 0 12px 28px -12px rgba(11, 26, 36, 0.18);
  --shadow-lg: 0 4px 10px rgba(11, 26, 36, 0.07), 0 28px 60px -22px rgba(11, 26, 36, 0.28);

  /* Velo que se pone sobre las fotos para que el texto blanco se lea */
  --scrim: rgba(8, 17, 26, 0.62);
  --scrim-strong: rgba(8, 17, 26, 0.86);
  --on-photo: #ffffff;
  --on-photo-dim: rgba(255, 255, 255, 0.76);

  /* Cortina de transición entre páginas */
  --curtain: #0b141a;

  /* ---- Acento activo (se reasigna por sección de servicio) ----
     --accent      color puro de marca: barras, puntos, rellenos, bordes
     --accent-ink  versión oscurecida, la única válida para TEXTO sobre claro
     --accent-soft tinte muy suave para fondos
     --accent-glow sombra de color (no un halo de neón)                     */
  --accent: var(--brand-green);
  --accent-ink: var(--green-700);
  --accent-soft: rgba(68, 172, 52, 0.12);
  --accent-tint: rgba(68, 172, 52, 0.055);
  --accent-glow: rgba(68, 172, 52, 0.42);
  --on-accent: #06210a;   /* texto sobre relleno de acento */

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.35rem, 1.7rem + 3.2vw, 4.4rem);
  --step-5: clamp(2.9rem, 1.8rem + 5.4vw, 6.6rem);

  /* ---- Ritmo ---- */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --container: 1280px;
  --container-wide: 1560px;
  --section-y: clamp(4.5rem, 9vh + 3rem, 9rem);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* ---- Esquina biselada "ingenieril" ---- */
  --notch: 10px;
  --notch-sm: 6px;

  /* ---- Alturas ---- */
  --header-h: 78px;
  --header-h-sm: 64px;

  --z-bg: 0;
  --z-content: 1;
  --z-header: 60;
  --z-float: 70;
  --z-overlay: 90;
  --z-boot: 100;
}

/* Acentos por línea de negocio — las cuatro caras del logo.
   Cada uno lleva su variante oscura para texto legible sobre fondo claro. */
[data-accent="torres"] {
  --accent: var(--brand-green); --accent-ink: var(--green-700);
  --accent-soft: rgba(68, 172, 52, 0.12); --accent-tint: rgba(68, 172, 52, 0.055);
  --accent-glow: rgba(68, 172, 52, 0.42); --on-accent: #06210a;
}
[data-accent="arcos"] {
  --accent: var(--brand-amber); --accent-ink: var(--amber-700);
  --accent-soft: rgba(249, 178, 33, 0.16); --accent-tint: rgba(249, 178, 33, 0.075);
  --accent-glow: rgba(249, 178, 33, 0.45); --on-accent: #291a00;
}
[data-accent="rayos"] {
  --accent: var(--brand-red); --accent-ink: var(--red-700);
  --accent-soft: rgba(202, 34, 44, 0.11); --accent-tint: rgba(202, 34, 44, 0.05);
  --accent-glow: rgba(202, 34, 44, 0.4); --on-accent: #ffffff;
}
[data-accent="cctv"] {
  --accent: var(--brand-blue); --accent-ink: var(--blue-700);
  --accent-soft: rgba(0, 133, 200, 0.12); --accent-tint: rgba(0, 133, 200, 0.055);
  --accent-glow: rgba(0, 133, 200, 0.42); --on-accent: #ffffff;
}

/* Bloques que van sobre fotografía: dentro de ellos el texto es claro y el
   acento vuelve a su versión pura, porque el fondo ya es oscuro. */
.on-photo {
  --text-hi: var(--on-photo);
  --text: var(--on-photo);
  --text-mid: var(--on-photo-dim);
  --text-low: var(--on-photo-dim);
  --accent-ink: var(--accent);
  --hairline: rgba(255, 255, 255, 0.18);
  --hairline-soft: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.32);
  color: var(--on-photo);
}