/**
 * amo-constanta design tokens
 * Extracted from the Claude Design canvas "AMO Landing 1a_1.dc.html"
 * (Coolvetica Rg / Coolvetica Cond, #ee5c37 / #4a3227 / #fdf6e6 palette).
 *
 * Coolvetica is licensed for web use as of 2026-09-03 (the earlier
 * "desktop-only" flag from REBUILD-LOG.md 2026-08-29 is stale) — loaded
 * locally via assets/css/fonts.css for headings/hero/nav/buttons. Archivo
 * (Google Fonts) stays for body-paragraph text.
 *
 * Spacing is mapped to an 8dp grid (--space-1 = 4px .. --space-14 = 112px).
 * Several source values in the design do not land on an 8px step; those are
 * rounded to the nearest step here and logged with old -> new in NOTES.md
 * rather than silently reused as one-off px values in templates.
 */

:root{
  /* ---- color ---- */
  --color-accent: #ee5c37;
  --color-accent-hover: #d4451f;
  --color-accent-tint: rgba(238,92,55,.12);
  --color-accent-tint-2: rgba(238,92,55,.1);
  --color-ink: #4a3227;
  --color-ink-soft: #6b4a3a;
  --color-ink-softer: #8a6a58;
  --color-ink-faint: #a98a72;
  --color-cream: #fdf6e6;
  --color-cream-page: #f0e6d6;
  --color-white-warm: #fffaf0;
  --color-pill-text: #c2431f;

  --color-border-soft: rgba(74,50,39,.12);
  --color-border: rgba(74,50,39,.14);
  --color-border-strong: rgba(74,50,39,.16);
  --color-border-stronger: rgba(74,50,39,.18);
  --color-border-input: rgba(74,50,39,.25);
  --color-overlay: rgba(74,50,39,.28);

  --color-footer-bg: var(--color-accent);
  --color-footer-text: #fffaf0;
  --color-footer-text-soft: #fff3e4;
  --color-footer-text-faint: #ffd9c4;

  --color-danger: #b3261e;
  --color-danger-bg: #fbeae9;
  --color-success: #2e7d46;

  /* ---- type ---- */
  --font-heading: 'Coolvetica', system-ui, sans-serif;
  --font-body: 'Archivo', 'Coolvetica', system-ui, sans-serif;
  --font-mono-label: 'Coolvetica Cond', 'Archivo', ui-monospace, monospace;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-hero: 88px; /* source: 92px, rounded to nearest 8dp step; flagged */

  /* ---- 8dp spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 112px;

  /* ---- radius (source design is pill/rounded for buttons+badges, square for cards) ---- */
  --radius-none: 0;
  --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-card: 0 4px 14px rgba(74,50,39,.08);
  --shadow-cart: -18px 0 40px rgba(74,50,39,.14);

  /* ---- layout ---- */
  --container-max: 1360px;
  --container-pad: var(--space-8); /* 40px, matches source */

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --marquee-duration: 32s;
}

/* Breakpoints (documented here for reference; media queries can't read
   custom properties as bare numbers, so these are applied literally in
   each stylesheet at the same three values):
   mobile:  max-width: 767px
   tablet:  768px - 1023px
   desktop: min-width: 1024px (source design canvas width) */