/* ==========================================================================
   BERNARDO'S BURRITOS — DESIGN TOKENS
   Source of truth: approved Figma design system.
   Every other stylesheet should reference these custom properties rather
   than hard-coding colors, type, spacing, or radii.
   ========================================================================== */

:root {
  /* ---- Color: brand red ------------------------------------------------ */
  --color-brand-red: #af2a27;
  --color-brand-red-dark: #8f1f1d;
  --color-brand-red-muted: rgba(175, 42, 39, 0.06);
  --color-brand-red-border: rgba(175, 42, 39, 0.3);       /* default, 0.25–0.35 range */
  --color-brand-red-border-soft: rgba(175, 42, 39, 0.25);
  --color-brand-red-border-strong: rgba(175, 42, 39, 0.35);

  /* ---- Color: backgrounds ----------------------------------------------- */
  --color-bg-primary: #ffffff;
  --color-bg-dark: #111111;
  --color-bg-deeper-dark: #0d0d0d;

  /* ---- Color: text -------------------------------------------------------*/
  --color-text-primary: #111111;
  --color-text-secondary: #333333;
  --color-text-muted: #555555;
  --color-text-muted-light: #666666;

  --color-white: #ffffff;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-45: rgba(255, 255, 255, 0.45);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-18: rgba(255, 255, 255, 0.18);

  /* ---- Color: borders & overlays ---------------------------------------- */
  --color-border-light: rgba(0, 0, 0, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.1);          /* default, 0.06–0.12 range */
  --color-border-dark-soft: rgba(255, 255, 255, 0.06);
  --color-border-dark-strong: rgba(255, 255, 255, 0.12);

  --color-overlay-dark: rgba(0, 0, 0, 0.8);                /* default, 0.72–0.92 range */
  --color-overlay-dark-min: rgba(0, 0, 0, 0.72);
  --color-overlay-dark-max: rgba(0, 0, 0, 0.92);

  /* ---- Typography: families ---------------------------------------------*/
  --font-heading: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-serif-accent: Georgia, "Times New Roman", serif;  /* Farmers Market callout only */

  /* ---- Typography: scale ------------------------------------------------*/
  --fs-h1: clamp(4.5rem, 9vw, 9rem);
  --fs-h2: clamp(2.25rem, 4.5vw, 4.5rem);
  --fs-h3: 2.25rem;
  --fs-stat: 2.25rem;
  --fs-eyebrow: 0.72rem;
  --fs-body: 0.925rem;
  --fs-body-sm: 0.845rem;
  --fs-nav-link: 0.8rem;
  --fs-btn: 0.875rem;
  --fs-btn-sm: 0.8rem;
  --fs-caption: 0.72rem;
  --fs-caption-sm: 0.62rem;
  --fs-footer-heading: 0.72rem;
  --fs-footer-body: 0.845rem;
  --fs-footer-body-sm: 0.78rem;
  --fs-farmers-market: 1.05rem;

  /* ---- Typography: weights ----------------------------------------------*/
  --fw-heading-bold: 700;
  --fw-heading-xbold: 800;
  --fw-heading-black: 900;
  --fw-body-regular: 400;
  --fw-body-medium: 500;
  --fw-body-semibold: 600;
  --fw-body-bold: 700;

  /* ---- Typography: line-height & letter-spacing -------------------------*/
  --lh-h1: 0.9;
  --lh-h2: 0.95;
  --lh-body: 1.75;
  --lh-body-sm: 1.6;

  --ls-eyebrow: 0.18em;
  --ls-nav: 0.08em;
  --ls-btn: 0.07em;
  --ls-caption: 0.15em;
  --ls-footer-heading: 0.15em;

  /* ---- Spacing scale ------------------------------------------------------*/
  --space-xs: 0.4rem;      /* tight gap, inline elements: 0.4–0.5rem */
  --space-sm: 0.6rem;      /* component gap: 0.6–0.875rem */
  --space-sm-lg: 0.875rem;
  --space-md: 1.25rem;     /* section inner gap: 1.25–2rem */
  --space-lg: 2rem;
  --space-section-gap: 2.5rem; /* section-to-section */

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: 1.5rem;                       /* mobile */
  --container-pad-lg: clamp(2rem, 5vw, 5rem);    /* desktop panels */
  --section-pad-y: clamp(4rem, 8vw, 7rem);
  --panel-pad: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
  --nav-height: 80px;
  --split-left: 55%;
  --split-right: 45%;

  /* ---- Radius (nothing large or pill-shaped) ----------------------------*/
  --radius-btn: 2px;
  --radius-card: 3px;
  --radius-circle: 50%;

  /* ---- Buttons ----------------------------------------------------------*/
  --btn-padding-lg: 0.875rem 2rem;
  --btn-padding-sm: 0.5rem 1.25rem;   /* nav compact */
  --btn-icon-size: 40px;

  /* ---- Motion -------------------------------------------------------------*/
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* ---- Z-index scale --------------------------------------------------- */
  --z-nav: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
}