/* =========================================================
   ELCAZO COFFEE — consolidated design tokens + page styles
   Merged from the El Cazo design system (colors, fonts,
   typography, spacing) plus page-level styles.
   Webfonts are loaded via <link> in the document head.
   ========================================================= */

:root {
  /* ---------- Fonts (Google Fonts substitutions echoing the logo/signage) ---------- */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-script: 'Yellowtail', cursive;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  /* ---------- Primary: Charcoal (ceiling / matte black fixtures) ---------- */
  --charcoal-50:  #F3EEE6;
  --charcoal-100: #E4DCD2;
  --charcoal-200: #C4B9AD;
  --charcoal-300: #9C8F82;
  --charcoal-400: #7A6C60;
  --charcoal-500: #5F5349;
  --charcoal-600: #4A403A;
  --charcoal-700: #362F2B;
  --charcoal-800: #262220;
  --charcoal-900: #1A1817;

  /* ---------- Secondary: Espresso (logo + wood furniture) ---------- */
  --espresso-50:  #F6EEE2;
  --espresso-100: #E9D9C2;
  --espresso-200: #D0AE87;
  --espresso-300: #B08256;
  --espresso-400: #8F5F3F;
  --espresso-500: #74492E;
  --espresso-600: #5C3A24;
  --espresso-700: #4A2E1E;
  --espresso-800: #3E2416;
  --espresso-900: #2E1B10;

  /* ---------- Accent 1: Terracotta (burnt-orange banquette) — primary CTA ---------- */
  --terracotta-50:  #FDF5EC;
  --terracotta-100: #FBEBDA;
  --terracotta-200: #F6D7B7;
  --terracotta-300: #EFB98A;
  --terracotta-400: #E5985F;
  --terracotta-500: #D97B3F;
  --terracotta-600: #C1662F;
  --terracotta-700: #A8531F;
  --terracotta-800: #8A4319;
  --terracotta-900: #6B330F;

  /* ---------- Accent 2: Olive (deep feature wall) ---------- */
  --olive-50:  #EEF0E1;
  --olive-100: #D5DBB8;
  --olive-200: #ACBB82;
  --olive-300: #869752;
  --olive-400: #647540;
  --olive-500: #4C5A3B;
  --olive-600: #3F4A32;
  --olive-700: #3A4229;
  --olive-800: #303722;
  --olive-900: #232A1B;

  /* ---------- Neutral: warm cream → warm-grey ramp ---------- */
  --neutral-50:  #FBF7F0;
  --neutral-100: #F5EFE3;
  --neutral-200: #EAE0D2;
  --neutral-300: #D6C9B8;
  --neutral-400: #B8A996;
  --neutral-500: #8F8072;
  --neutral-600: #6B5F54;
  --neutral-700: #4A423A;
  --neutral-800: #322C26;
  --neutral-900: #1F1B17;

  /* ---------- Highlight / glow: neon warm-white ---------- */
  --glow-white: #FFF9EF;
  --glow-shadow: 0 0 12px rgba(255, 249, 239, 0.55), 0 0 28px rgba(217, 123, 63, 0.35);

  /* ---------- Semantic aliases ---------- */
  --surface-page:        var(--neutral-100);
  --surface-page-alt:    var(--neutral-50);
  --surface-card:        var(--neutral-50);
  --surface-inverse:     var(--charcoal-900);
  --surface-olive:       var(--olive-600);
  --surface-espresso:    var(--espresso-700);

  --text-primary:        var(--charcoal-900);
  --text-secondary:      var(--espresso-700);
  --text-muted:          var(--neutral-600);
  --text-on-dark:        var(--neutral-50);
  --text-on-accent:      var(--neutral-50);
  --text-link:           var(--terracotta-700);
  --text-link-hover:     var(--terracotta-600);

  --border-default:      var(--neutral-300);
  --border-strong:       var(--charcoal-700);
  --border-on-dark:      rgba(245, 239, 227, 0.16);

  --cta-primary-bg:      var(--terracotta-600);
  --cta-primary-bg-hover: var(--terracotta-700);
  --cta-primary-text:    var(--neutral-50);

  --cta-secondary-bg:    transparent;
  --cta-secondary-border: var(--espresso-700);
  --cta-secondary-text:  var(--espresso-700);

  --focus-ring: 0 0 0 3px rgba(217, 123, 63, 0.45);

  /* ---------- Type scale (desktop) ---------- */
  --text-h1: 700 4rem/1.05 var(--font-display);
  --text-h2: 700 3rem/1.1 var(--font-display);
  --text-h3: 600 2.25rem/1.2 var(--font-display);
  --text-h4: 600 1.75rem/1.25 var(--font-display);
  --text-h5: 600 1.375rem/1.35 var(--font-body);
  --text-h6: 700 0.9375rem/1.4 var(--font-body);

  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-small: 400 0.875rem/1.5 var(--font-body);
  --text-caption: 600 0.75rem/1.4 var(--font-body);

  --text-script-hero: 400 3.5rem/1.1 var(--font-script);
  --text-script-quote: 400 2rem/1.3 var(--font-script);

  --label-letterspacing: 0.08em;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* ---------- Spacing (8px scale) ---------- */
  --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;
  --space-10: 128px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Shadow (warm, low-contrast) ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 24, 23, 0.10);
  --shadow-md: 0 4px 12px rgba(26, 24, 23, 0.14);
  --shadow-lg: 0 12px 32px rgba(26, 24, 23, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 249, 239, 0.08);

  /* ---------- Borders ---------- */
  --border-width-hairline: 1px;
  --border-width-structural: 2px;

  /* ---------- Layout / grid ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ---------- Type scale (mobile overrides) ---------- */
@media (max-width: 767px) {
  :root {
    --text-h1: 700 2.5rem/1.1 var(--font-display);
    --text-h2: 700 2rem/1.15 var(--font-display);
    --text-h3: 600 1.625rem/1.25 var(--font-display);
    --text-h4: 600 1.375rem/1.3 var(--font-display);
    --text-h5: 600 1.1875rem/1.4 var(--font-body);
    --text-h6: 700 0.875rem/1.4 var(--font-body);

    --text-body-lg: 400 1.0625rem/1.6 var(--font-body);
    --text-body: 400 0.9375rem/1.6 var(--font-body);
    --text-small: 400 0.8125rem/1.5 var(--font-body);
    --text-caption: 600 0.6875rem/1.4 var(--font-body);

    --text-script-hero: 400 2.25rem/1.15 var(--font-script);
    --text-script-quote: 400 1.5rem/1.3 var(--font-script);
  }
}

/* ---------- Page styles ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--neutral-50); }
a { color: var(--terracotta-700); }
a:hover { color: var(--terracotta-800); }

@media (max-width: 720px) {
  #navbar { flex-direction: column; align-items: center; gap: 12px; padding: 16px !important; }
  #nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 18px !important; }
  #nav-cta { order: 3; flex-basis: 100%; text-align: center; }
  #hero { min-height: 420px !important; padding: 40px 20px !important; }
  #hero h1 { font-size: 32px !important; }
  section { padding: 48px 20px !important; }
  #visit-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: left; }
}