/* ==========================================================================
   LÚA — Design tokens
   Every value here is derived from assets/lua_logo.png.
   Golds were sampled directly from the logo artwork, not invented.
   ========================================================================== */

:root {
  /* --- Ink -------------------------------------------------------------- */
  --ink-900: #000000;   /* logo field, hero backdrop */
  --ink-800: #0b0b0b;   /* page background */
  --ink-700: #121110;   /* cards, elevated surfaces */
  --ink-600: #1a1815;   /* raised surface / input background */
  --ink-500: #26221c;   /* borders on dark */

  /* --- Gold (sampled from logo) ----------------------------------------- */
  --gold-100: #f7d9a0;  /* highlight */
  --gold-200: #f0c87c;
  --gold-300: #e8b058;  /* most common logo gold — links, icons */
  --gold-400: #d8a050;
  --gold-500: #c89040;  /* core brand gold — the ring colour */
  --gold-600: #a8762f;

  /* Heading gradient, taken from the lua-website build's --gradient-gold.
     Hex is declared first as a fallback for engines without oklch(). */
  --gold-grad: linear-gradient(100deg, #ce9a50, #fae39f, #d7a53f);
  --gold-grad: linear-gradient(100deg,
      oklch(0.72 0.11 74), oklch(0.92 0.09 92), oklch(0.75 0.13 82));

  --gold-grad-soft: linear-gradient(150deg, #f0c87c, #c89040);

  /* --- Cream / text ------------------------------------------------------ */
  --cream-100: #f4efe6; /* headings */
  --cream-300: #cfc7b8; /* body copy */
  --cream-500: #8c8577; /* captions, muted — 5.3:1 on --ink-800, AA pass */
  --cream-700: #5b564d; /* disabled, faint rules */

  /* --- Semantic ---------------------------------------------------------- */
  --bg:            var(--ink-800);
  --bg-elevated:   var(--ink-700);
  --text:          var(--cream-300);
  --text-strong:   var(--cream-100);
  --text-muted:    var(--cream-500);
  --accent-bright: var(--gold-300);

  --hairline:        rgba(200, 144, 64, 0.28);
  --hairline-strong: rgba(200, 144, 64, 0.55);
  --hairline-faint:  rgba(200, 144, 64, 0.14);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale — 320px … 1440px viewport */
  --fs-h1:    clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --fs-h3:    clamp(1.3rem, 1.05rem + 1.2vw, 1.875rem);
  --fs-lead:  clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  --fs-body:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-tiny:  0.75rem;

  --tracking-eyebrow: 0.32em;  /* matches "VIETNAMESE KITCHEN + BAR" */
  --tracking-wide:    0.16em;
  --tracking-nav:     0.12em;

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.75;

  /* --- Space ------------------------------------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(4.5rem, 3rem + 7vw, 9rem);  /* vertical section rhythm */

  --shell:       min(100% - 2.5rem, 78rem);  /* page gutter + max width */
  --shell-text:  min(100% - 2.5rem, 46rem);  /* readable prose measure */
  --header-h:    72px;

  /* --- Shape / depth ----------------------------------------------------- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 26px 60px -28px rgba(0, 0, 0, 0.95),
                 0 0 0 1px var(--hairline);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid:  320ms;
  --dur-slow: 620ms;

  --z-header: 100;
  --z-menubar: 90;
  --z-lightbox: 200;
}

/* The site is dark-only by design: the logo is gold-on-black and a light
   inversion would misrepresent the brand. We still declare the scheme so
   browser UI (scrollbars, form controls) matches. */
:root { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; }
}