/* ==========================================================================
   Design tokens — every color, size and motion value lives here.
   Change a brand color here and the whole site follows.
   ========================================================================== */

:root {
  /* ---------- Raw brand colors (components use the semantic tokens below) ---------- */
  --espresso: #120b08;
  --espresso-2: #1b110d;
  --espresso-3: #24170f;
  --brown: #4a221a;
  --kraft: #c6a07a;
  --kraft-light: #dcbf9b;
  --kraft-deep: #7e5631; /* darker gold that passes AA contrast on cream */
  --coffee: #5a3a26; /* crema and coffee surfaces, same in both themes */
  --coffee-deep: #3a2418;
  --cream: #f4eee6;
  --cream-2: #ebe1d3;
  --paper: #fbf8f3;
  --logo-brown: #4a241e; /* the café's logo brown, for the mark on light backgrounds */

  /* ---------- Semantic colors — dark is the default mood ---------- */
  --bg: var(--espresso);
  --bg-raised: var(--espresso-2);
  --surface: var(--espresso-3);
  --text: var(--cream);
  --text-muted: rgb(244 238 230 / 0.7);
  --text-faint: rgb(244 238 230 / 0.58);
  --accent: var(--kraft); /* gold text and rules */
  --accent-hover: var(--kraft-light);
  --accent-fill: var(--kraft); /* gold button background */
  --on-accent: var(--espresso); /* text on gold */
  --mark: var(--kraft); /* logo mark: gold on dark */
  --line: rgb(198 160 122 / 0.22);
  --line-strong: rgb(198 160 122 / 0.45);
  --header-bg: rgb(18 11 8 / 0.72);
  --shadow-card: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  --glare: rgb(244 238 230 / 0.16); /* light sheen on tilted cards (tilt.js) */

  /* Text on photos is always light, whatever the theme */
  --on-photo: var(--cream);
  --on-photo-muted: rgb(244 238 230 / 0.78);

  /* Light grade for static gallery photos only. Photos that move use files
     pre-graded by tools/grade-images.mjs (a CSS filter on a moving photo is
     re-applied every frame and makes scrolling heavy). */
  --grade-soft: brightness(0.8) contrast(1.06) saturate(1.04) sepia(0.08);

  /* ---------- Type ---------- */
  --font-display: "Bellissimo Display", "Amiri", "Playfair Display", Georgia, serif;
  --font-body: "Alexandria", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  /* Fluid sizes (smallest screen -> largest screen) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --fs-xl: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --fs-2xl: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);
  --fs-hero: clamp(3rem, 1.6rem + 6.4vw, 7.4rem);

  --tracking-eyebrow: 0.32em; /* letter-spacing for the small uppercase labels */
  --leading-tight: 1.15;
  --leading-body: 1.75;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --section-pad: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --container: 1240px;
  --container-narrow: 860px;
  --header-h: 72px;

  /* ---------- Shapes ---------- */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 0 0 / 600px 600px 0 0; /* the arch — brand motif */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 450ms;
  --dur-slow: 900ms;
  --dur-reveal: 1100ms;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-float: 40;
  --z-header: 50;
  --z-overlay: 60;
  --z-skip: 100;

  color-scheme: dark;
}

/* ---------- Light mode (latte / cream) ---------- */
/* Applies when the device is light and the visitor hasn't chosen, or when they pick light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--cream);
    --bg-raised: var(--cream-2);
    --surface: var(--paper);
    --text: #231410;
    --text-muted: rgb(35 20 16 / 0.72);
    --text-faint: rgb(35 20 16 / 0.66);
    --accent: var(--kraft-deep);
    --accent-hover: var(--brown);
    --mark: var(--logo-brown);
    --line: rgb(74 34 26 / 0.16);
    --line-strong: rgb(74 34 26 / 0.32);
    --header-bg: rgb(244 238 230 / 0.8);
    --shadow-card: 0 30px 60px -34px rgb(74 34 26 / 0.45);
    --glare: rgb(198 160 122 / 0.22);
    --grade-soft: brightness(0.96) contrast(1.04) saturate(1.02) sepia(0.05);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: var(--cream);
  --bg-raised: var(--cream-2);
  --surface: var(--paper);
  --text: #231410;
  --text-muted: rgb(35 20 16 / 0.72);
  --text-faint: rgb(35 20 16 / 0.66);
  --accent: var(--kraft-deep);
  --accent-hover: var(--brown);
  --mark: var(--logo-brown);
  --line: rgb(74 34 26 / 0.16);
  --line-strong: rgb(74 34 26 / 0.32);
  --header-bg: rgb(244 238 230 / 0.8);
  --shadow-card: 0 30px 60px -34px rgb(74 34 26 / 0.45);
  --glare: rgb(198 160 122 / 0.22);
  --grade-soft: brightness(0.96) contrast(1.04) saturate(1.02) sepia(0.05);
  color-scheme: light;
}

/* Visitor asked for less motion: shorten long animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}