/* ============================================================
   HOLY.systems — Design Tokens
   Color + Typography + Spacing + Radii + Shadows
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* ---------- COLORS ---------- */

  /* Primary — verde HOLY (WhatsApp-adjacent, propio) */
  --holy-green: #0F8A5F;
  --holy-green-hover: #0B7350;
  --holy-green-active: #08624A;
  --holy-green-soft: #E5F4ED;
  --holy-green-line: #B6DEC9;

  /* Accent — verde vivo (ticks, micro highlights) */
  --accent-green: #1FAA59;

  /* Accent — dorado tenue (reseñas, premium) */
  --accent-gold: #C8A24B;
  --accent-gold-soft: #F6EFD9;

  /* Secondary — carbón (headers, jerarquía) */
  --carbon-900: #0E1B26;
  --carbon-800: #1A2935;
  --carbon-700: #2A3845;

  /* Neutrals */
  --white: #FFFFFF;
  --gray-50: #FAFAFA;
  --gray-100: #F5F6F7;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7480;
  --gray-600: #4B5563;
  --gray-700: #374151;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--gray-100);
  --bg-inverse: var(--carbon-900);

  --fg-1: var(--carbon-900);   /* primary text */
  --fg-2: var(--gray-500);     /* secondary text / metadata */
  --fg-3: var(--gray-400);     /* placeholder / disabled */
  --fg-on-dark: var(--white);
  --fg-on-green: var(--white);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--holy-green);

  --link: var(--holy-green);
  --link-hover: var(--holy-green-hover);

  --success: var(--accent-green);
  --success-bg: var(--holy-green-soft);
  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --danger: #B42318;
  --danger-bg: #FEE4E2;

  /* ---------- TYPOGRAPHY ---------- */

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Mobile-first sizes; desktop overrides below */
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-micro: 12px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 27, 38, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 27, 38, 0.06), 0 1px 2px rgba(14, 27, 38, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 27, 38, 0.08);
  --shadow-lg: 0 20px 48px rgba(14, 27, 38, 0.12);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;
}

@media (min-width: 768px) {
  :root {
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-h3: 20px;
  }
}

/* ============================================================
   Base + semantic typography
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
}

.h-display, h1.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

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

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
}

.body-sm, small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}