/* ============================================================
   TOMATILLOS TACOS GRILL — BRAND TOKENS
   Version 2.0 — Mexico Country / Wood refinement (2026-04-23)
   ------------------------------------------------------------
   Refined palette based on Thiago's direction:
   "Less dominant green. Mexico country, wood, warm.
    Still Mexican, still has green — but green is a seasoning,
    not the main dish."
   ============================================================ */

/* Font imports — load at the top of the consuming document */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Inter:wght@300;400;500;600;700;800&family=Work+Sans:wght@300;400;500;600;700&family=Amatic+SC:wght@400;700&family=Caveat:wght@400;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ========== COLORS — refined palette ========== */

  /* Primary — wood & cream (the 60% base) */
  --brand-wood:           #6B4423;  /* rustic walnut, primary anchor */
  --brand-wood-deep:      #4A2E17;  /* darker wood, hover/pressed */
  --brand-wood-light:     #8A6142;  /* sanded wood, borders */
  --brand-cream:          #F5EBD8;  /* artisan paper, primary bg */
  --brand-cream-warm:     #EDE0C5;  /* cream shadow / card bg */
  --brand-bone:           #EBE0CC;  /* bone white, secondary cards */

  /* Secondary — the Mexican green, but tamed */
  --brand-olive:          #6B7D4A;  /* muted olive — the brand green */
  --brand-olive-dark:     #4A5D3E;  /* deep sage, text on light */
  --brand-olive-light:    #A8B580;  /* lighter olive, subtle accents */

  /* Accent — Mexican warmth */
  --brand-terracotta:     #C85D3D;  /* clay pot, heat, CTA accent */
  --brand-terracotta-dark:#A04A2F;  /* terracotta hover */
  --brand-terracotta-light:#E08266; /* terracotta highlight */

  /* Neutrals */
  --brand-charcoal:       #2B1810;  /* nearly-black brown, body text */
  --brand-charcoal-soft:  #3D2618;  /* soft charcoal, secondary text */
  --brand-smoke:          #6F5E50;  /* warm gray, tertiary text */

  /* Highlight */
  --brand-gold:           #D4A15E;  /* soft gold, premium detail */
  --brand-gold-deep:      #B07E3D;  /* deeper gold for contrast */

  /* Semantic aliases */
  --bg-primary:           var(--brand-cream);
  --bg-secondary:         var(--brand-bone);
  --bg-card:              var(--brand-cream-warm);
  --bg-dark:              var(--brand-wood);
  --bg-darkest:           var(--brand-charcoal);

  --text-primary:         var(--brand-charcoal);
  --text-secondary:       var(--brand-charcoal-soft);
  --text-muted:           var(--brand-smoke);
  --text-on-dark:         var(--brand-cream);
  --text-accent:          var(--brand-terracotta);

  --border-soft:          rgba(107, 68, 35, 0.15);
  --border-medium:        rgba(107, 68, 35, 0.30);
  --border-strong:        var(--brand-wood);

  /* ========== TYPOGRAPHY ========== */
  --font-display:         'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:            'Inter', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:          'Amatic SC', 'Caveat', cursive;
  --font-hand:            'Caveat', 'Amatic SC', cursive;
  --font-mono:            'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — modular 1.25 */
  --text-xs:              0.75rem;    /* 12px */
  --text-sm:              0.875rem;   /* 14px */
  --text-base:            1rem;       /* 16px */
  --text-md:              1.125rem;   /* 18px */
  --text-lg:              1.375rem;   /* 22px */
  --text-xl:              1.75rem;    /* 28px */
  --text-2xl:             2.25rem;    /* 36px */
  --text-3xl:             3rem;       /* 48px */
  --text-4xl:             4rem;       /* 64px */
  --text-5xl:             5.5rem;     /* 88px */
  --text-hero:            7rem;       /* 112px */

  /* Line heights */
  --leading-tight:        1.1;
  --leading-snug:         1.25;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* Letter spacing */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.12em;
  --tracking-widest:      0.25em;

  /* ========== SPACING ========== */
  --space-1:              0.25rem;  /* 4px */
  --space-2:              0.5rem;   /* 8px */
  --space-3:              0.75rem;  /* 12px */
  --space-4:              1rem;     /* 16px */
  --space-5:              1.5rem;   /* 24px */
  --space-6:              2rem;     /* 32px */
  --space-7:              2.5rem;   /* 40px */
  --space-8:              3rem;     /* 48px */
  --space-9:              4rem;     /* 64px */
  --space-10:             5rem;     /* 80px */
  --space-12:             7rem;     /* 112px */
  --space-16:             10rem;    /* 160px */

  /* ========== RADIUS ========== */
  --radius-sm:            3px;
  --radius-md:            6px;
  --radius-lg:            12px;
  --radius-xl:            20px;
  --radius-pill:          999px;

  /* ========== SHADOWS (warm-tinted) ========== */
  --shadow-sm:            0 1px 2px rgba(43, 24, 16, 0.06);
  --shadow-md:            0 4px 12px rgba(43, 24, 16, 0.08);
  --shadow-lg:            0 12px 32px rgba(43, 24, 16, 0.12);
  --shadow-xl:            0 24px 60px rgba(43, 24, 16, 0.18);

  /* ========== TRANSITIONS ========== */
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:      150ms var(--ease-out);
  --transition-base:      240ms var(--ease-out);
  --transition-slow:      450ms var(--ease-out);
}

/* ============================================================
   BASE RESET + DEFAULTS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--leading-normal);
}

body {
  margin: 0;
  font-size: var(--text-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--brand-wood-deep);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  font-weight: 700;
}

p { margin: 0 0 var(--space-4); }

a {
  color: var(--brand-terracotta-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-fast);
}
a:hover { color: var(--brand-terracotta); }

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-8) 0;
}

/* ============================================================
   UTILITY CLASSES — ready for menu / website / marketing
   ============================================================ */

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
}

.btn-primary {
  background: var(--brand-terracotta);
  color: var(--brand-cream);
  border-color: var(--brand-terracotta-dark);
}
.btn-primary:hover {
  background: var(--brand-terracotta-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--brand-wood);
  color: var(--brand-cream);
  border-color: var(--brand-wood-deep);
}
.btn-secondary:hover {
  background: var(--brand-wood-deep);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-wood);
  border-color: var(--brand-wood);
}
.btn-ghost:hover {
  background: var(--brand-wood);
  color: var(--brand-cream);
}

/* -------- Cards -------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-elevated { box-shadow: var(--shadow-md); }
.card-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-color: var(--brand-wood-deep);
}

/* -------- Tags / badges -------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}

.tag-spicy {
  color: var(--brand-terracotta-dark);
  background: rgba(200, 93, 61, 0.10);
}
.tag-veg {
  color: var(--brand-olive-dark);
  background: rgba(107, 125, 74, 0.12);
}
.tag-gf {
  color: var(--brand-gold-deep);
  background: rgba(212, 161, 94, 0.15);
}
.tag-new {
  color: var(--brand-wood-deep);
  background: var(--brand-cream-warm);
  border-color: var(--brand-wood);
}

/* -------- Eyebrow / section label -------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-terracotta-dark);
  margin-bottom: var(--space-3);
}

/* -------- Accent script (handwritten) -------- */
.script {
  font-family: var(--font-hand);
  font-weight: 600;
  color: var(--brand-terracotta);
  font-size: 1.3em;
  line-height: 1;
}

/* -------- Price formatter (menu) -------- */
.price {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--brand-wood-deep);
  letter-spacing: var(--tracking-tight);
}

/* -------- Divider with ornament -------- */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  color: var(--brand-wood-light);
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* -------- Grid helpers -------- */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -------- Surfaces -------- */
.surface-cream   { background: var(--brand-cream); color: var(--brand-charcoal); }
.surface-bone    { background: var(--brand-bone); color: var(--brand-charcoal); }
.surface-wood    { background: var(--brand-wood); color: var(--brand-cream); }
.surface-olive   { background: var(--brand-olive); color: var(--brand-cream); }
.surface-terra   { background: var(--brand-terracotta); color: var(--brand-cream); }
.surface-dark    { background: var(--brand-charcoal); color: var(--brand-cream); }

/* -------- Paper texture (subtle) -------- */
.texture-paper {
  position: relative;
  isolation: isolate;
}
.texture-paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.27 0 0 0 0 0.14 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   USAGE RATIO (reference, not applied — documentation only)
   60% cream+wood / 20% olive+terracotta / 10% accents / 10% charcoal
   ============================================================ */