/* ============================================================
   StorageIdol — Core Tokens
   "Always-On" · Clay accent · Serif display · Pill geometry
   ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* Source Serif 4 (display + body) · JetBrains Mono (numeric).
   CDN is the repo default; self-hosting is the GDPR-safer swap
   for an EU/Spanish audience (avoids sending visitor IPs to Google). */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=JetBrains+Mono:wght@400&display=swap");

:root {
  /* ============== COLORS ============== */

  /* Surface */
  --canvas: #f0eee6;             /* cream — page background */
  --canvas-ivory: #faf9f5;       /* ivory — cards, pills, demo section */
  --canvas-oat: #e3dacc;         /* oat — "Cómo funciona" section, chips */
  --canvas-sand: #f5e3c7;        /* sand — icon circles, pago bubble */

  /* Ink & text */
  --ink: #141413;                /* near-black — text, dark surfaces */
  --slate: #3d3d3a;              /* secondary text */
  --muted: #87867f;              /* tertiary text, eyebrows on dark */
  --placeholder: #b0aea5;        /* input placeholder, faint labels */
  --on-dark: #f0eee6;            /* text on ink surfaces */
  --on-dark-strong: #faf9f5;     /* headings on ink surfaces */

  /* Brand & accent */
  --accent: #d97757;             /* terracotta / clay — the conversion colour */
  --accent-hover: #c6613f;       /* darker clay — hover, links */
  --success: #4a8f5b;            /* WhatsApp / "live" green */

  /* Dark-surface helpers (Flujo en vivo) */
  --dark-pill: #201f1d;          /* call chips on the dark section */

  /* Oat-surface helpers (Cómo funciona tabs) */
  --oat-border: #cbb99b;         /* step-tab border */
  --oat-badge: #d9cbb0;          /* inactive step-tab badge */

  /* Lines */
  --hairline: #cccbc8;           /* borders on cream */
  --hairline-dark: #3d3d3a;      /* divider on ink surfaces */

  /* Link */
  --link: var(--accent-hover);

  /* ============== TYPE ============== */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui:      system-ui, "Segoe UI", Arial, sans-serif;  /* nav, labels, chips */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Display scale — fluid clamps taken verbatim from the design */
  --display-hero:    400 clamp(42px, 5.6vw, 72px)/1.04 var(--font-display);
  --display-section: 400 clamp(34px, 4.2vw, 50px)/1.08 var(--font-display);
  --display-dark:    400 clamp(32px, 4vw, 48px)/1.08 var(--font-display);
  --display-demo:    400 clamp(32px, 4vw, 46px)/1.12 var(--font-display);
  --display-metric:  600 clamp(44px, 5.4vw, 64px)/1 var(--font-display);
  --display-step:    600 clamp(28px, 3.4vw, 36px)/1.1 var(--font-display);
  --display-card:    600 24px/1.15 var(--font-display);

  /* Body scale */
  --body-xl:       400 20px/1.5 var(--font-text);   /* section lede */
  --body-lg:       400 19px/1.5 var(--font-text);   /* step panel copy */
  --body-md:       400 18px/1.45 var(--font-text);  /* card copy */
  --serif-15:      400 15px/1.4 var(--font-text);   /* bubble transcript */

  /* UI (sans) scale */
  --ui-lg:   600 16px/1.2 var(--font-ui);
  --ui-md:   500 15px/1.3 var(--font-ui);
  --ui-sm:   600 13px/1.3 var(--font-ui);
  --ui-xs:   600 12px/1.3 var(--font-ui);
  --eyebrow: 600 12px/1.3 var(--font-ui);

  /* ============== SPACING ============== */
  --space-xxs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* ============== SHAPE ============== */
  --r-none:    0px;
  --r-sm:      5px;              /* bubble tail corner */
  --r-md:      14px;
  --r-lg:      16px;            /* chat bubbles, list rows */
  --r-input:   16px;
  --r-card-sm: 20px;
  --r-card:    22px;           /* panel inner cards */
  --r-card-lg: 26px;          /* hero dashboard, pago / whatsapp bubbles */
  --r-card-xl: 28px;         /* call bubble */
  --r-panel:   32px;         /* steps card shell */
  --r-pill:    999px;

  /* ============== ELEVATION ============== */
  --shadow-0: none;
  --shadow-float: 0 26px 60px -30px rgba(20, 20, 19, 0.5);   /* hero bubbles */
  --shadow-pop:   0 10px 24px -14px rgba(20, 20, 19, 0.5);   /* panel tags */
  --shadow-panel: 0 44px 100px -55px rgba(20, 20, 19, 0.7);  /* steps card */

  /* ============== LAYOUT ============== */
  --max-width: 1280px;
  --gutter-desktop: 32px;
  --gutter-mobile:  20px;

  /* ============== MOTION ============== */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}

/* ============================================================
   Semantic element resets
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
a  { color: var(--accent-hover); text-decoration: none; }
a:hover { color: var(--ink); }
input, select, button, textarea { font-family: inherit; }
::placeholder { color: var(--placeholder); }
code, pre { font-family: var(--font-mono); }