/* ============================================================
   Pascal Design System — Colors & Type
   Estilo Apple limpio, minimalista, moderno y amigable.
   Monocromo + acento azul (Apple Blue).
   ============================================================ */

/* ============================================================
   FUENTES — Poppins (familia oficial de Pascal)
   ============================================================
   Poppins se sirve localmente desde /fonts (TTF, todas las
   variantes 100–900 + itálicas).
   Mono sigue siendo JetBrains Mono vía Google Fonts.
   ⚠️ Poppins es geométrica (no humanista como Inter/SF Pro).
      El tracking negativo se redujo respecto al sistema previo.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Poppins-Thin.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Poppins-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Poppins-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Poppins-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Poppins-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Poppins-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Poppins-BlackItalic.ttf") format("truetype"); }

:root {
  /* ---------- COLOR — escala neutra (gris cálido tipo Apple) ---------- */
  --gray-0:  #ffffff;
  --gray-50: #fbfbfd;   /* fondo de página (Apple-ish) */
  --gray-100:#f5f5f7;   /* fondo de sección, hover muy sutil */
  --gray-150:#eeeef0;
  --gray-200:#e5e5ea;   /* divisores, borders sutiles (iOS systemGray5) */
  --gray-300:#d2d2d7;   /* borders (Apple.com border) */
  --gray-400:#aeaeb2;
  --gray-500:#86868b;   /* texto secundario (Apple.com) */
  --gray-600:#6e6e73;   /* texto secundario fuerte */
  --gray-700:#48484a;
  --gray-800:#1d1d1f;   /* texto primario (Apple.com headline) */
  --gray-900:#000000;

  /* ---------- COLOR — acento (Apple Blue) ---------- */
  --accent-50:  #e7f2ff;
  --accent-100: #cfe4ff;
  --accent-200: #9ec8ff;
  --accent-300: #5ea7ff;
  --accent-400: #2e8bff;
  --accent-500: #2378e1;   /* Pascal blue — versión más suave del iOS systemBlue */
  --accent-600: #1a6cce;   /* link/button blue (un paso más oscuro) */
  --accent-700: #0058b0;
  --accent-800: #003f80;
  --accent-900: #002a55;

  /* ---------- COLOR — semánticos (iOS system colors, sobrios) ---------- */
  --success: #3fb866;    /* Pascal green — más suave que iOS systemGreen */
  --success-bg: #e8f8ec;
  --warning: #ff9f0a;    /* iOS systemOrange — atención */
  --warning-bg: #fff4e1;
  --danger:  #ec5752;    /* Pascal red — más suave que iOS systemRed */
  --danger-bg: #ffeceb;
  --info:    #2378e1;
  --info-bg: #e7f2ff;

  /* ---------- COLOR — foreground / background semantic vars ---------- */
  --fg-1: var(--gray-800);   /* texto principal */
  --fg-2: var(--gray-600);   /* texto secundario */
  --fg-3: var(--gray-500);   /* texto terciario / placeholder */
  --fg-on-accent: #ffffff;

  --bg-1: var(--gray-0);     /* superficie principal (tarjetas) */
  --bg-2: var(--gray-50);    /* fondo de página */
  --bg-3: var(--gray-100);   /* fondo de sección */
  --bg-inverse: var(--gray-800);

  --border-1: var(--gray-200);
  --border-2: var(--gray-300);
  --border-strong: var(--gray-400);

  --link: var(--accent-600);
  --link-hover: var(--accent-500);

  /* ---------- TYPE — familias ---------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;

  /* ---------- TYPE — escala (basada en Apple HIG / Apple.com) ---------- */
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* base */
  --text-lg:  18px;
  --text-xl:  21px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* Pesos (Apple-ish: -tight letter-spacing en displays) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-normal:1.47;   /* Apple body */
  --lh-loose: 1.6;

  --tracking-tighter: -0.01em;
  --tracking-tight: -0.005em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- SPACING (4-pt grid, Apple-style) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* ---------- RADII (Apple usa squircles generosos) ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl:28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (suaves, casi imperceptibles) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-focus: 0 0 0 4px rgba(10,132,255,0.18);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* ---------- MOTION (curvas Apple) ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasize: cubic-bezier(0.32, 0.72, 0, 1);   /* Apple-ish */
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
}

/* ============================================================
   Base / Reset suave (no agresivo)
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ============================================================
   Roles tipográficos semánticos
   ============================================================ */

.display-1, h1.display {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, var(--text-6xl));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

p, .body {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.small, small {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.caption {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
a:hover { color: var(--link-hover); }