/* ============================================================
   La Pola Cafe — Colors & Type
   ------------------------------------------------------------
   A warm, vintage neighborhood cafe in Ashgrove, Brisbane.
   Hand-lettered Art Nouveau identity with Colombian roots.
   ============================================================ */

/* -----------------------------------------------------------
   FONTS
   -----------------------------------------------------------
   The real logo is CUSTOM HAND-LETTERING — it should never be
   replaced with a font. For everything else we use three web
   typefaces chosen to feel continuous with the logo's voice:

   Display  → "Abril Fatface"  (tall, high-contrast didone —
              stands in for the theatrical La Pola letterforms)
   Script   → "Yellowtail"     (loose brushy script — stands in
              for the "Hot Drinks" / "Iced Lattes" hand scrawl)
   Text     → "Inter"          (neutral, legible, the adult in
              the room so menus stay readable)
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Yellowtail&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- CORE PALETTE -------------------------------------- */
  --lp-ink:        #000000;   /* primary — menus, logo bg, type */
  --lp-cream:      #D8C098;   /* signature wheat/sand bg        */
  --lp-cream-soft: #E8D4B0;   /* lighter cream, for cards       */
  --lp-cream-deep: #C6A97E;   /* deeper cream, for borders      */
  --lp-gold:       #D9CA8F;   /* ornamental gold (logo flourish)*/
  --lp-teal:       #80B0B0;   /* dusty teal — tulip flowers     */
  --lp-teal-deep:  #2C4C4C;   /* darker teal, for hover states  */
  --lp-paper:      #F4E7CC;   /* warmest tone, backgrounds      */
  --lp-bone:       #FFFFFF;   /* type on black                  */

  /* ---- SEMANTIC ------------------------------------------ */
  --lp-bg:         var(--lp-cream);
  --lp-bg-alt:     var(--lp-paper);
  --lp-bg-dark:    var(--lp-ink);
  --lp-fg:         var(--lp-ink);
  --lp-fg-subtle:  #4A3E2A;        /* faded ink for captions   */
  --lp-fg-muted:   var(--lp-fg-subtle); /* legacy alias              */
  --lp-fg-on-dark: var(--lp-bone);
  --lp-accent:     var(--lp-teal);
  --lp-rule:       #2B2418;        /* hairlines on cream        */
  --lp-rule-dark:  #33312A;        /* hairlines on ink          */

  /* ---- TYPEFACES ----------------------------------------- */
  --lp-font-display: 'Abril Fatface', 'Playfair Display', Georgia, serif;
  --lp-font-script:  'Yellowtail', 'Caveat', 'Segoe Script', cursive;
  --lp-font-text:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---- RADII / SHADOW / SPACING -------------------------- */
  --lp-radius-sm: 2px;    /* menus rarely use rounding         */
  --lp-radius-md: 6px;
  --lp-radius-lg: 14px;
  --lp-radius-pill: 999px;

  --lp-shadow-card:  0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(43,36,24,0.08);
  --lp-shadow-lift:  0 2px 0 rgba(0,0,0,0.06), 0 18px 40px rgba(43,36,24,0.14);
  --lp-shadow-press: inset 0 2px 0 rgba(0,0,0,0.10);

  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 24px;
  --lp-space-6: 32px;
  --lp-space-7: 48px;
  --lp-space-8: 64px;
  --lp-space-9: 96px;

  /* ---- BORDER / STROKE ----------------------------------- */
  --lp-stroke-hair: 1px;
  --lp-stroke: 1.5px;
  --lp-stroke-bold: 3px;
}

/* -----------------------------------------------------------
   TYPE SCALE — semantic classes
   ----------------------------------------------------------- */
.lp-display {
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--lp-fg);
}

.lp-h1 {
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--lp-fg);
}

.lp-h2 {
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  color: var(--lp-fg);
}

.lp-h3 {
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--lp-fg);
}

.lp-scrawl {
  /* the "Hot Drinks" loose script voice */
  font-family: var(--lp-font-script);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: var(--lp-fg);
}

.lp-scrawl-sm {
  font-family: var(--lp-font-script);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--lp-fg);
}

.lp-eyebrow {
  font-family: var(--lp-font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lp-fg-muted);
}

.lp-body {
  font-family: var(--lp-font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-fg);
}

.lp-body-lg {
  font-family: var(--lp-font-text), serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--lp-fg);
}

.lp-caption {
  font-family: var(--lp-font-text);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lp-fg-subtle);
}

.lp-price {
  font-family: var(--lp-font-script);
  font-size: 32px;
  color: var(--lp-fg);
}

/* -----------------------------------------------------------
   CANVAS — page defaults
   ----------------------------------------------------------- */
.lp-page {
  background: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-font-text);
}

.lp-page-dark {
  background: var(--lp-bg-dark);
  color: var(--lp-fg-on-dark);
  font-family: var(--lp-font-text);
}

/* -----------------------------------------------------------
   MOBILE RESPONSIVE UTILITIES
   ----------------------------------------------------------- */
@media (max-width: 768px) {
  /* Layout utilities */
  .m-stack { 
    grid-template-columns: 1fr !important; 
  }
  .m-stack-gap-sm { gap: 32px !important; }
  .m-stack-gap-md { gap: 40px !important; }
  .m-stack-gap-lg { gap: 56px !important; }
  
  .m-flex-col {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* specific tweaks */
  .m-hero-pad { padding: 40px 24px 24px !important; }
  .m-section-pad { padding: 56px 24px !important; }
  .m-hide { display: none !important; }
  .m-text-center { text-align: center !important; justify-content: center !important; }
  
  /* Gallery grid stack */
  .m-gallery { 
    grid-template-columns: repeat(2, 1fr) !important; 
    grid-auto-rows: 140px !important; 
  }
  .m-gallery > figure { 
    grid-column: span 2 !important; 
    grid-row: span 1 !important; 
  }
  
  /* Newsletter tweaks */
  .m-newsletter-pad { padding: 32px 24px !important; }
  
  /* Navigation tweaks */
  .m-nav-wrap { 
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 12px 20px !important;
  }
  .m-nav-links { 
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  
  /* typography resizing */
  .m-h1 { font-size: clamp(52px, 12vw, 128px) !important; }
  .m-h2 { font-size: clamp(40px, 10vw, 88px) !important; }
}