/* Jeanette's landing values: the token file for docs/design/previews/ (landing.html, payment-modal.html).
   Every value is taken from her approved page (package Recetario-landing-Enrique-2026-10-26, sitio/index.html, its
   :root and the literals in its CSS) and from DISENO.md, so the previews stay faithful to her design (owner's brief,
   2026-11-02). Names are English; values are hers. The few values she did not have (currency chip, wallet buttons,
   error box) are marked "added". Interim: no system is signed yet (docs/design/README.md); this file is replaced by
   the generated docs/design/tokens.css once one is. */

:root {
  /* Colours (DISENO.md "Colores") */
  --aqua-700: #067d73;          /* buttons, highlighted title word, icons, step numbers: white on it 5.0:1 */
  --aqua-800: #05665e;          /* hover and focus ring */
  --aqua-50: #eef9f7;           /* footer and boxes */
  --aqua-100: #d9f2ee;          /* soft borders, selection */
  --coral-text: #b3391d;        /* launch label text */
  --coral-50: #fff1ec;          /* launch label background */
  --ink: #1a1a1a;
  --ink-soft: #47524f;
  --ink-faint: #6b7573;
  --line: #e3e9e8;
  --surface: #ffffff;
  --surface-alt: #f5faf9;       /* alternate sections */
  --on-accent: #ffffff;
  --field-border: #8a9593;      /* 3:1 against white (DISENO.md) */
  --error: #b3261e;             /* her payment error red */
  --error-bg: #fdeceb;          /* added: tint behind the error box (Alejandra's modal pattern) */
  --wallet-bg: #000000;         /* added: Apple Pay and Google Pay buttons are black per their brand rules */
  --wallet-ink: #ffffff;
  --scrim: rgba(10, 20, 18, 0.6);
  --scrim-viewer: rgba(10, 20, 18, 0.88);
  --chip-on-photo: rgba(255, 255, 255, 0.94);
  --arrow-bg: rgba(255, 255, 255, 0.92);
  --image-edge: rgba(0, 0, 0, 0.1);
  --skeleton: #edf1f0;          /* added: loading placeholders, static */

  /* Fonts (DISENO.md "Letra") */
  --font-title: "Fraunces", Georgia, serif;
  --font-text: "Inter", system-ui, sans-serif;
  --font-label: "Poppins", "Inter", sans-serif;

  /* Type sizes, in px as she set them (the store theme makes 1 rem = 10 px) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-29: 29px;
  --fs-30: 30px;
  --fs-34: 34px;
  --fs-40: 40px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-58: 58px;
  --fs-h1-phone: clamp(32px, 9.3vw, 36px);
  --fs-stat-phone: clamp(36px, 11vw, 44px);
  --fs-32: 32px;                /* added: the stat figure below 360 px, where hers overflowed its card */

  /* Spacing */
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-8: 8px;
  --sp-9: 9px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-60: 60px;
  --sp-72: 72px;
  --sp-96: 96px;
  --sp-viewer-x: 3vw;
  --margin-phone: 20px;
  --margin-desktop: 40px;
  --width-phone: 560px;
  --width-desktop: 1120px;
  --margin: var(--margin-phone);   /* the page margin and content width in use: hers switch at 960 px (below) */
  --width: var(--width-phone);
  --sp-card-brands: 104px;      /* added: room for the card brand marks inside the card number field */

  /* Radii */
  --r-2: 2px;
  --r-5: 5px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-14: 14px;
  --r-18: 18px;
  --r-20: 20px;
  --r-22: 22px;
  --r-24: 24px;
  --r-pill: 99px;

  /* Shadows (hers; the card border is a shadow ring, not a grey line) */
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-button: 0 6px 18px rgba(6, 125, 115, 0.25);
  --shadow-sheet: 0 8px 24px rgba(26, 26, 26, 0.08);
  --shadow-sheet-hover: 0 14px 34px rgba(26, 26, 26, 0.14);
  --shadow-price-card: 0 14px 40px rgba(6, 125, 115, 0.12);
  --shadow-cover: 0 6px 16px rgba(26, 26, 26, 0.18);
  --shadow-cover-sm: 0 4px 12px rgba(26, 26, 26, 0.18);
  --shadow-bar: 0 -8px 24px rgba(26, 26, 26, 0.08);
  --shadow-modal: 0 -10px 40px rgba(0, 0, 0, 0.2);
  --shadow-footer-stuck: 0 -1px 0 rgba(26, 26, 26, 0.08);
  /* added: the ANS button ledge (decision 58), a solid edge in a darker shade of her aqua: at rest 4 px, raised 6 px
     with a mouse, pressed 1 px. Shared by the landing buttons and the modal's main buttons */
  --ledge: color-mix(in oklab, var(--aqua-800) 70%, var(--ink));
  --shadow-ledge: 0 4px 0 var(--ledge);
  --shadow-ledge-up: 0 6px 0 var(--ledge);
  --shadow-ledge-down: 0 1px 0 var(--ledge);
  /* added: the sticky bar as a floating card from 760 px (her shadow ring plus the sheet's raised shadow) */
  --shadow-dock: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 14px 34px rgba(26, 26, 26, 0.16);
  --ease-out-strong: cubic-bezier(0.2, 0, 0, 1);   /* added: ANS's button and seal curve */

  /* Durations */
  --dur-50: 0.05s;              /* added: the payment modal's step switch, how long the new step waits for the old to start leaving */
  --dur-100: 0.1s;              /* added: the success page's entrance stagger (better-ui: 100 ms apart) */
  --dur-150: 0.15s;
  --dur-200: 0.2s;
  --dur-250: 0.25s;
  --dur-300: 0.3s;              /* added: each element of that entrance */
  --dur-spin: 0.7s;
}

@media (min-width: 960px) {
  :root { --margin: var(--margin-desktop); --width: var(--width-desktop); }
}