/*
  Subject list:
  1. Kuih Corner - Shah Alam home bakery
  2. Fresh steamed kuih lapis (delicate peelable steamed layers, rose and coconut milk)
  3. Onde-onde (pandan-infused glutinous rice balls bursting with molten gula melaka, tossed in freshly grated coconut)
  4. Pandan chiffon cake (airy, fragrant with fresh pandan juice and rich santan)
  5. Shah Alam residential neighborhood, Selangor
  6. Neighbors, family gatherings, weekend tea times, morning treats
  7. Fresh screwpine (daun pandan) juice - vivid jade and emerald tones
  8. Steaming hot trays, banana leaf lining, warm kitchen aromatics
  9. Direct WhatsApp ordering, neighborhood pickup or nearby delivery
  10. Warm, kind, human voice of a neighborhood baker

  Design idea:
  On this site, the vibrant green freshness of extracted pandan juice and banana leaves becomes an earthy, modern split-tone system where the rich kuih menu is both a clear price list and an instant WhatsApp order slip for neighbors.
  Bold element: An interactive neighborhood order builder that calculates the total and formats a polite WhatsApp message with pickup/delivery notes and today's baking hours.
*/

:root {
  /* Palette: Pandan green theme */
  --color-ground: #f4f8f4;
  --color-surface: #ffffff;
  --color-surface-soft: #eaf3ea;
  --color-ink: #142817;
  --color-ink-muted: #3f5543;
  --color-accent: #1e7e34;
  --color-accent-hover: #155e26;
  --color-accent-tint: #d8edd9;
  --color-border: #cfe0d0;

  /* Typography */
  --font-display: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-body: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

  --font-size-xs: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.875rem;
  --font-size-2xl: 2.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shapes */
  --radius: 0px;
}

::selection {
  background-color: var(--color-accent-tint);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}