/*
Design Plan:
Subject List:
1. QA29 Kopi Corner - neighbourhood Malaysian cafe serving everyday comforts
2. Menu staples: Kopi O (RM3), Kaya Toast (RM5), Nasi Lemak (RM8)
3. Location: 12 Jalan Contoh, Kuala Lumpur
4. Hours: Mon-Sat 8:00am - 6:00pm (Sunday closed)
5. Warm cream walls and deep green painted window sills and kopitiam wood trims
6. Ritual: Morning kopi order called across the counter, steaming porcelain cups, floral saucers
7. Tactile print artefact: The classic kopitiam chalk slate / laminated table menu board
8. Constraint: Simple, honest, no pretense, fast neighbourhood service

The Idea:
"On this site, the laminated neighbourhood kopitiam counter slate becomes an open, interactive table board where locals can check today's status, filter their morning breakfast order, and get directions in two taps."
For competitors: OldTown or Starbucks use glossy corporate franchise imagery; QA29 feels like the corner kopitiam run by friendly neighbours on Jalan Contoh.

One bold element:
An immediate, live "Open / Closed right now" status badge tied directly to the Malaysian cafe timetable (Mon-Sat 8am-6pm) alongside an interactive, thumb-friendly menu board with instant tab filtering.
*/

:root {
  --color-ground: #FAF7F0; /* Warm cream */
  --color-surface: #FFFFFF;
  --color-surface-soft: #F2ECE1; /* Cream accent field */
  --color-ink: #1B291E; /* Deep green-tinted charcoal black */
  --color-ink-muted: #4A5B4E; /* Forest grey for secondary copy */
  --color-accent: #1C4D2E; /* Deep Malaysian kopitiam green */
  --color-accent-hover: #143821;
  --color-accent-soft: #E5EFE7; /* Soft sage green pill / highlight */

  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --font-body: Seravek, 'Gill Sans Nova', Calibri, 'DejaVu Sans', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 2.25rem;
  --text-display: clamp(2.25rem, 5vw, 3.5rem);

  --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;

  --radius-sm: 4px;
  --radius-full: 9999px;
  --radius-none: 0px;
}

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

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