/* Design plan:
   - Subject list: QA29 Salon, fictional QA appointment salon, haircut (30min RM30) and colour (90min RM120), styling chairs, salon mirrors, scissor trims, color bowls, clean minimalist studio aesthetic, appointment appointment ledger, test suite precision.
   - Idea sentence: On this site, the salon appointment schedule ledger becomes an interactive live booking terminal with immediate slot conflict protection and real-time database persistence.
   - Why it fits this brief: QA testers and salon clients both demand crisp, foolproof scheduling with zero duplicate slots, instant feedback, and clear audit of saved appointments.
   - One bold element: A dedicated live slot selector board that updates dynamically by date and disables already-booked salon timeslots.
*/

:root {
  --color-ground: #0f1416;
  --color-surface: #171e22;
  --color-surface-soft: #20292e;
  --color-ink: #f1f4f5;
  --color-ink-muted: #95a3a8;
  --color-accent: #2dd4bf;
  --color-accent-soft: color-mix(in oklch, var(--color-accent) 18%, transparent);
  --color-accent-hover: #14b8a6;
  --color-accent-ink: #042f2e;
  --color-danger: #f87171;
  --color-danger-soft: color-mix(in oklch, var(--color-danger) 18%, transparent);

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-display: clamp(2rem, 4vw, 3rem);
  --text-title: clamp(1.35rem, 2.5vw, 1.85rem);
  --text-lead: 1.125rem;
  --text-body: 0.95rem;
  --text-caption: 0.8125rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-base: 6px;
}