/* ============================================================
   BASE — Tokens de diseño, reset y tipografía
   Fuente: análisis Figma "Configurador Slim System" (Simon)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400&display=swap');

:root {
  /* ── Colores ── */
  --c-white:          #FFFFFF;
  --c-accent:         #726D67;   /* Gris cálido — botones nav, CTAs secundarios */
  --c-accent-dark:    #434240;   /* Gris oscuro cálido — estados activos, fills primarios */
  --c-text-primary:   #434240;   /* Titulares principales */
  --c-text-body:      #434240;   /* Texto de cuerpo */
  --c-text-dark:      #434240;   /* Acordeón, texto oscuro */
  --c-text-muted:     #96928A;   /* Texto secundario/inactivo */
  --c-text-medium:    #726D67;   /* Gris medio */
  --c-text-overlay:   rgba(67, 66, 64, 0.85);  /* Labels en overlay */

  --c-bg-app:         #E3DED8;   /* Fondo principal (warm greige) */
  --c-bg-subtle:      #F3EDEB;   /* Superficies secundarias */
  --c-bg-light:       #F4F2F1;   /* Fondos claros, tarjetas */
  --c-bg-overlay:     rgba(67, 66, 64, 0.60); /* Overlay frosted de tarjetas */
  --c-bg-card-active: #434240;   /* Color-btn activo */
  --c-bg-dark:        #1A1A1A;   /* Fondos muy oscuros */

  --c-border:         rgba(67, 66, 64, 0.20); /* Borde cálido */
  --c-border-soft:    rgba(67, 66, 64, 0.10); /* Divisor accordion */
  --c-border-accent:  #726D67;   /* Borde botón acento */

  /* ── Tipografía ── */
  --font:       'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', 'SFMono-Regular', 'Courier New', monospace;

  /* ── Tamaños de texto (sistema Figma) ── */
  --text-display: 40px;   /* Display / título inicio */
  --text-h6:      24px;   /* Heading 6 / nombres de tarjeta */
  --text-body1:   18px;   /* Body 1 / items de acordeón */
  --text-body2:   16px;   /* Body 2 / botones, general */
  --text-body3:   14px;   /* Body 3 / etiquetas pequeñas */
  --text-mono:    16px;   /* Subheading 1 (mono, mayúsculas) */

  /* ── Interlineados ── */
  --lh-display:  1.20;
  --lh-normal:   1.30;

  /* ── Peso de fuente ── */
  --fw-regular: 400;
  --fw-medium:  500;

  /* ── Espaciados (sistema Figma) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  64px;

  /* ── Bordes ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  32px;
  --r-full: 999px;

  /* ── Estructura de pantalla ── */
  --navbar-h:    73px;
  --panel-w:    379px;   /* Ancho fijo del panel derecho (= width text "Añade elementos" en Figma) */
  --panel-gap:   42px;   /* Separación 3D ↔ panel */
  --page-px:     40px;   /* Padding horizontal de página */

  /* ── Efectos ── */
  --blur-overlay: blur(20px);
  --shadow-card:  0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  --shadow-soft:  0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--text-body2);
  font-weight: var(--fw-regular);
  color: var(--c-text-body);
  background: var(--c-bg-app);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
hr { border: none; }

/* ── Clases de tipografía ── */
.text-display {
  font-size: var(--text-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

.text-h6 {
  font-size: var(--text-h6);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
}

.text-body1 {
  font-size: var(--text-body1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.text-body2 {
  font-size: var(--text-body2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.text-body2-medium {
  font-size: var(--text-body2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.text-body3 {
  font-size: var(--text-body3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: 0;
}