/* Design tokens — see docs/DESIGN_SYSTEM_BUENTAJO.md.
   Values here formalize the palette/scale already shipped in the original
   styles.css; nothing here changes what ships on the home page. */
:root {
  /* Color */
  --color-ink: #14221e;
  --color-muted: #60706a;
  --color-accent: #147a5a;
  --color-accent-dark: #0d583f;
  --color-cream: #f6f4ed;
  --color-white: #fff;
  --color-line: #dce4df;

  --color-success: #147a5a;
  --color-success-on-dark: #a8efd0;
  --color-danger: #c4392b;
  --color-danger-on-dark: #ffb9ae;
  --color-warning: #b7791f;
  --color-info: #2563eb;

  /* Extended palette for the public redesign. These are tints/shades of the
     palette above, not a second design system: every value is derived from
     --color-accent / --color-ink / --color-cream so the site keeps one
     identity across public and private pages. */
  --color-accent-soft: #e5f1ec; /* accent at ~10% over cream: chips, pills */
  --color-accent-softer: #f0f7f4; /* section backgrounds */
  --color-accent-bright: #84d8ae; /* accent legible on --color-ink */
  --color-ink-soft: #1d302a; /* second dark step for gradients on dark blocks */
  --color-ink-glow: #24463a; /* highlight of the dark band's gradient only */
  --color-ink-on-dark: #d1dfd9; /* body copy over --color-ink */
  --color-surface: #fff; /* cards and raised panels */
  --color-surface-alt: #fbfaf6; /* subtle alternate surface over cream */
  --color-line-strong: #c3d0ca; /* dividers that need to read as a real edge */
  /* Rating stars — warm, never the accent green. Dark enough to clear the 3:1
     non-text contrast ratio on white (3.46) and on cream (3.14). */
  --color-star: #b87f00;
  --color-star-soft: #fbf3df;
  --color-danger-soft: #fbe9e7;
  --color-warning-soft: #fbf1e0;
  --color-info-soft: #e7edfd;

  /* --- Secondary palette (visual pass 2) ---------------------------------
     Green stays the brand colour and the only colour for primary actions.
     These two families are dosed in icons, badges, chips, small secondary
     CTAs and alternating section tints, so the site reads richer without
     turning multicoloured.

     Ember = warm commercial accent. Deliberately NOT --color-warning, which
     keeps its semantic meaning ("something needs your attention"); ember
     never signals a problem, it highlights an offer or a shortcut.
     Every text/background pair below was checked against WCAG 2.1 AA:
       ember on white 5.49 · on cream 4.99 · on ember-soft 4.91
       white on ember 5.49 · white on ember-dark 7.94
       ember-bright on ink 7.73 (only ever used on the dark bands) */
  --color-ember: #b4460e;
  --color-ember-dark: #8c3608;
  --color-ember-bright: #f2a03d;
  --color-ember-soft: #fdf0e4;
  --color-ember-softer: #fef7f0;

  /* Trust / information blue. --color-info stays as the semantic token used
     by .alert--info; --color-info-dark is the text-safe step this pass needs
     (7.65 on white, 6.53 on --color-info-soft). */
  --color-info-dark: #1b47c4;
  --color-info-softer: #f2f5fe;

  /* Fourth tint of the category rotation: a neutral derived from the ink, so
     the rotation never repeats a hue twice in a row.
     ink 14.30 · muted 4.54 · accent-dark 7.35 on --color-neutral-soft. */
  --color-neutral-soft: #ecf0ee;
  --color-neutral-softer: #f4f7f5;

  /* Typography: system font stack, no external font request (see
     Design System §2.2 — Inter was declared but never loaded). */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The old --font-display (up to 5.7rem) was sized for a single-column
     hero. The redesigned hero is two-column, so the headline shares the row
     with the search card and tops out lower. */
  --font-display: clamp(2.1rem, 4.4vw, 3.5rem);
  --font-heading-lg: clamp(1.7rem, 3vw, 2.5rem);
  --font-heading-sm: clamp(1.2rem, 2vw, 1.5rem);
  --font-heading-md: 1.2rem;
  --font-body-lg: 1.16rem;
  --font-body-md: 1rem;
  --font-body-sm: 0.9rem;
  --font-caption: 0.74rem;

  /* Spacing (8px scale, used by new pages/components) */
  --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;

  /* Borders and radii */
  --radius-sm: 9px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-width-sm: 1px;
  --border-width-md: 2px;

  --radius-xl: 28px;

  /* Shadows */
  --shadow-card: 0 16px 38px #11201912;
  --shadow-hover: 0 10px 24px #11201920;
  --shadow-modal: 0 24px 64px #11201930;
  --shadow-sm: 0 1px 2px #1120190f;
  --shadow-raised: 0 20px 48px #11201914;
  /* Hover lift for the richer cards of the second visual pass. */
  --shadow-lift: 0 18px 36px #1120191f;

  /* Layout */
  --layout-max: 1180px;
  --layout-gutter: 28px;
  --header-height: 72px;

  /* Breakpoints (documented for reference; media queries use literal px) */
  --bp-sm: 480px;
  --bp-md: 700px;
  --bp-lg: 960px;
  --bp-xl: 1180px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: ease-out;
}