/* ============================================================================
   PAU ALDEA BATISTA — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for color, type, spacing, motion.
   Cambia un valor aquí y se propaga a todo el sitio.
   ============================================================================ */

/* Tipografía autoalojada: sin peticiones a Google Fonts */
@font-face {
  font-family: "Inter var";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter var";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── COLOR · Brand (paleta afinada, jerarquía real) ─────────────────────── */
  --blue-50:  #E8F4FA;  /* tints, hover backgrounds */
  --blue-100: #C7E1EE;
  --blue-200: #A8D4EC;  /* pale (antes --blue-pale) */
  --blue-300: #7EC0E4;  /* glow (antes --blue-glow) — iconos y acentos */
  --blue-400: #5BAED6;  /* mid (antes --blue-mid) */
  --blue-500: #3A96C8;  /* base (antes --blue) */
  --blue-600: #2E7FA8;
  --blue-700: #235F7D;
  --blue-800: #183F52;
  --blue-900: #0E2535;

  /* ── COLOR · Surfaces (fondos) ─────────────────────────────────────────── */
  --bg-0: #050D14;  /* antes --dark #040c12, ligeramente más claro para que las cards respiren */
  --bg-1: #0A1620;  /* page bg */
  --bg-2: #0E1F2D;  /* antes --dark-2 */
  --bg-3: #142A3D;  /* antes --dark-card #0b1e2d, subido para mejor jerarquía */
  --bg-elevated: #1A3247;

  /* ── COLOR · Borders ───────────────────────────────────────────────────── */
  --border-1: rgba(122, 158, 184, 0.08);  /* hairline */
  --border-2: rgba(122, 158, 184, 0.14);  /* default */
  --border-3: rgba(122, 158, 184, 0.24);  /* emphasis */
  --border-lit: rgba(126, 192, 228, 0.30); /* hover/active */

  /* ── COLOR · Text ──────────────────────────────────────────────────────── */
  --text-1: #EEF7FD;  /* antes --white */
  --text-2: #B8D0E2;  /* antes --muted #7a9eb8, mejorado contraste WCAG AA */
  --text-3: #7E9AB0;  /* subtle / labels */
  --text-4: #506A7E;  /* disabled */

  /* ── COLOR · Accent (ámbar — sparingly) ────────────────────────────────── */
  --amber-300: #F5C171;
  --amber-500: #F0A040;  /* base */
  --amber-600: #D88830;
  --amber-dim: rgba(240, 160, 64, 0.12);

  /* ── COLOR · Semantic (status) ──────────────────────────────────────────── */
  --success: #1D9E75;
  --success-dim: rgba(29, 158, 117, 0.15);
  --warning: #BA7517;
  --warning-dim: rgba(186, 117, 23, 0.15);
  --danger:  #D85A30;
  --danger-dim: rgba(216, 90, 48, 0.15);

  /* ── COLOR · Accents por sección (aide-style, color-coded) ─────────────── */
  /* Cada servicio usa un acento. `--dim` es la versión al 10% para fondos. */
  --accent-blue:   #61A7E7;  /* Insights / Analítica */
  --accent-blue-dim:   rgba(97, 167, 231, 0.10);
  --accent-purple: #9885D0;  /* AI Agents / Consultoría */
  --accent-purple-dim: rgba(152, 133, 208, 0.10);
  --accent-green:  #5DB49F;  /* Copilot / Formación */
  --accent-green-dim:  rgba(93, 180, 159, 0.10);
  --accent-amber:  #DEA732;  /* Workflows / Producto */
  --accent-amber-dim:  rgba(222, 167, 50, 0.10);
  --accent-pink:   #E11D48;  /* Automatización */
  --accent-pink-dim:   rgba(225, 29, 72, 0.10);

  /* ── SHORTCUTS (compatibilidad con código existente, no nuevos) ────────── */
  --blue: var(--blue-500);
  --blue-mid: var(--blue-400);
  --blue-pale: var(--blue-200);
  --blue-glow: var(--blue-300);
  --dark: var(--bg-1);
  --dark-2: var(--bg-2);
  --dark-card: var(--bg-3);
  --border: var(--border-2);
  --white: var(--text-1);
  --muted: var(--text-2);
  --amber: var(--amber-500);

  /* ── TYPOGRAPHY · Familias ─────────────────────────────────────────────── */
  --font-display: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ── TYPOGRAPHY · Escala modular (1.250 — major third) ─────────────────── */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.25rem;    /* 20px */
  --text-xl:  1.5rem;     /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */
  --text-6xl: 4.5rem;     /* 72px — hero */

  /* ── TYPOGRAPHY · Line heights ─────────────────────────────────────────── */
  --leading-none:   1;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── TYPOGRAPHY · Tracking ─────────────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.18em;

  /* ── SPACING (4px base) ────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */
  --space-11: 12rem;   /* 192px */

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  --container-max: 1120px;
  --container-narrow: 720px;
  --container-prose: 640px;
  --gutter: 1.5rem;

  /* ── RADIUS ────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ── SHADOWS · Sutiles, no dramáticas ──────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--border-1);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--border-1);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--border-1);
  --shadow-glow:  0 0 0 1px var(--border-lit), 0 8px 32px rgba(58, 150, 200, 0.15);
  --shadow-glow-strong: 0 0 0 1px var(--blue-300), 0 12px 48px rgba(91, 174, 214, 0.35);

  /* ── MOTION · Duración ─────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* ── MOTION · Easing ───────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX · Escala semántica ────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ============================================================================
   PAU ALDEA BATISTA — Home light-mode overrides (aide.app aesthetic)
   ----------------------------------------------------------------------------
   Scope: solo dentro de `<body class="home">`. Otras páginas siguen en dark.
   Activa la estética aide.app: fondo claro, tipografía Inter Variable, sombras
   tipo "ring" (0 0 0 4px) e inner shadow, radio 28px en cards, pills 500px.
   ============================================================================ */

.home {
  /* ── Tipografía · Inter Variable con pesos custom (450, 550, 750) ─────── */
  --font-display: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Tracking aide: ultra-negativo en headings, neutro en body ─────────── */
  --tracking-tight:  -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide:   -0.005em;
  --tracking-wider:  0;
  --tracking-widest: 0.02em;

  /* ── Surfaces · light mode ─────────────────────────────────────────────── */
  --bg-0: #FFFFFF;             /* fondo de página */
  --bg-1: #FAFAFA;             /* secciones alternas (gris imperceptible) */
  --bg-2: #F4F4F5;             /* cards planas, inputs */
  --bg-3: #FFFFFF;             /* cards default */
  --bg-elevated: #FFFFFF;

  /* ── Texto · dark sobre light ───────────────────────────────────────────── */
  --text-1: #0A0A0A;           /* antes EEF7FD — negro suave */
  --text-2: rgba(10, 10, 10, 0.70);
  --text-3: rgba(10, 10, 10, 0.50);
  --text-4: rgba(10, 10, 10, 0.30);

  /* ── Borders · imperceptibles (aide-style 3.5–10% negro) ──────────────── */
  --border-1: rgba(10, 10, 10, 0.035);
  --border-2: rgba(10, 10, 10, 0.065);
  --border-3: rgba(10, 10, 10, 0.10);
  --border-lit: rgba(10, 10, 10, 0.125);

  /* ── Sombras aide-style · "ring" shadows + inner shadow ────────────────── */
  --shadow-sm:  0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md:  0 0 0 4px rgba(10, 10, 10, 0.04);
  --shadow-lg:  0 0 0 4px rgba(10, 10, 10, 0.075);
  --shadow-xl:  0 8px 24px rgba(10, 10, 10, 0.06), 0 0 0 1px rgba(10, 10, 10, 0.04);
  --shadow-glow: 0 0 0 4px rgba(10, 10, 10, 0.04);
  --shadow-glow-strong: 0 0 0 4px rgba(10, 10, 10, 0.075);

  /* Sombras "press" de aide — para cards con efecto hundido */
  --shadow-inset:        inset 0 2px 8px 2px rgba(10, 10, 10, 0.025);
  --shadow-inset-hover:  inset 1px 2px 8px 2px rgba(255, 255, 255, 0.2);

  /* ── Radios aide · 28px cards, 500px pills ────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-pill: 500px;
  --radius-full: 999px;

  /* ── Pesos tipográficos custom (aide usa 450, 550, 580, 750) ───────────── */
  --weight-light:    400;
  --weight-body:     450;   /* el "normal" de aide */
  --weight-medium:   500;
  --weight-semibold: 550;
  --weight-bold:     600;
  --weight-display:  750;   /* para flechas y acentos */

  /* ── Body override · fondo claro, tipografía densa ─────────────────────── */
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.home::after {
  /* desactiva el film grain en light mode */
  display: none;
}

.home h1,
.home h2,
.home h3,
.home h4,
.home h5,
.home h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.home h1 { font-weight: var(--weight-semibold); letter-spacing: -0.04em; }
.home h2 { font-weight: var(--weight-semibold); letter-spacing: -0.035em; }
.home h3 { font-weight: var(--weight-semibold); letter-spacing: -0.025em; }

.home p { color: var(--text-2); }

.home a { color: inherit; }

.home em, .home .serif {
  font-style: italic;
  font-weight: var(--weight-body);
  color: var(--text-1);
}

/* ── Body container · aide usa un "card" que envuelve todo el contenido ─── */
.home-main-wrap {
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
  margin: 0 1.5rem;
  box-shadow: var(--shadow-inset);
  position: relative;
  overflow: hidden;
}

@media (max-width: 700px) {
  .home-main-wrap { margin: 0 0.75rem; border-radius: 20px; }
}