/* ==========================================================
   LOKEE Design Tokens v1.0
   Source: LoKee Full Logo Guidebook (Park Studios)
   Loaded AFTER the Webflow stylesheets. Overrides only.
   ========================================================== */
:root {
  /* Kofeo variable overrides */
  --bg: #141414;
  --body: #A89F8D;
  --body-2: #EAEAEA;
  --title: #FFFFFF;
  --primary: #FFFFFF;

  /* LoKee tokens */
  --lk-bg: #141414;
  --lk-bg-deep: #0E0D0C;
  --lk-surface: #1B1A17;
  --lk-surface-2: #242119;
  --lk-light: #EAEAEA;

  --lk-title: #FFFFFF;
  --lk-body: #EAEAEA;
  --lk-muted: #A89F8D;
  --lk-faint: #9B937F;
  --lk-gold: #C1B49A;

  --lk-accent: #F6921E;
  --lk-accent-hover: #F8A747;
  --lk-accent-pressed: #D97C10;
  --lk-accent-text: #F6921E;
  --lk-on-accent: #141414;

  --lk-border: rgba(193, 180, 154, 0.18);
  --lk-border-strong: rgba(193, 180, 154, 0.32);
  --lk-overlay: rgba(10, 10, 9, 0.65);
  --lk-gradient: linear-gradient(135deg, #F6921E 0%, #C1B49A 100%);
}

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

/* ==========================================================
   Component accent spec (Phase 4)
   Orange is the key, not the wallpaper: at most one orange
   element per viewport (the primary CTA or the active nav
   item). Sand gold carries eyebrows, prices and secondary
   accents. The brand gradient is reserved for a future hero
   pass and is not used here.
   Loaded after the Webflow stylesheet; overrides win on
   source order at equal specificity.
   ========================================================== */

/* 1. Primary CTA — filled orange with ink text/icons (never white
   on orange). :not(.outline) shields the outline secondary below
   and keeps ink text on the .primary-button.hover variant too. */
.primary-button:not(.outline) {
  color: var(--lk-on-accent);
  background-color: var(--lk-accent);
  border-color: var(--lk-accent);
}
.primary-button:not(.outline):hover {
  color: var(--lk-on-accent);
  background-color: var(--lk-accent-hover);
  border-color: var(--lk-accent-hover);
}
.primary-button:not(.outline):active {
  background-color: var(--lk-accent-pressed);
  border-color: var(--lk-accent-pressed);
}

/* Form submit button follows the primary spec. */
.contact-button {
  color: var(--lk-on-accent);
  background-color: var(--lk-accent);
  border-color: var(--lk-accent);
}
.contact-button:hover {
  color: var(--lk-on-accent);
  background-color: var(--lk-accent-hover);
  border-color: var(--lk-accent-hover);
}
.contact-button:active {
  background-color: var(--lk-accent-pressed);
  border-color: var(--lk-accent-pressed);
}

/* 2. Secondary buttons — transparent with a strong warm border and
   light text; orange accent on hover. */
.primary-button.outline {
  color: var(--lk-title);
  background-color: transparent;
  border-color: var(--lk-border-strong);
}
.primary-button.outline:hover {
  color: var(--lk-accent-text);
  border-color: var(--lk-accent);
}
/* Text / arrow secondary links ("Discover More", "Explore Our Menu"):
   keep the template's underline/arrow layout, add the orange hover. */
.hero-link,
.link-button {
  color: var(--lk-title);
}
.hero-link:hover,
.link-button:hover {
  color: var(--lk-accent-text);
}

/* 3. Nav — active page link in orange; other links warm to gold on
   hover. .w--current (0,2,0) outranks :hover (0,1,1), so the active
   link stays orange even while hovered. */
.nav-link.w--current {
  color: var(--lk-accent-text);
}
.nav-link:hover {
  color: var(--lk-gold);
}
/* Footer links warm to gold on hover (kept off the orange key). */
.ft-link:hover {
  color: var(--lk-gold);
}

/* 4. Eyebrow labels and section tags — sand gold. */
.about-heading,
.trending-heading,
.booking-sub-title,
.reserve-sub-title {
  color: var(--lk-gold);
}

/* 5. Menu prices — sand gold. */
.item-price {
  color: var(--lk-gold);
}

/* 6. Forms — underline fields (template design preserved): strong warm
   border, faint placeholder, orange focus underline. The spec's
   `input background: var(--lk-surface)` is intentionally omitted so
   the transparent underline inputs are not turned into filled boxes
   (see report); the visible focus ring is provided by rule 7. */
.input,
.textarea {
  border-bottom-color: var(--lk-border-strong);
}
.input:focus,
.textarea:focus {
  border-bottom-color: var(--lk-accent);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--lk-faint);
}

/* 7. Visible keyboard focus — global, for links, buttons and inputs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lk-accent-hover);
  outline-offset: 2px;
}

/* 8. Links inside body copy — gold, orange on hover. */
.w-richtext a {
  color: var(--lk-gold);
}
.w-richtext a:hover {
  color: var(--lk-accent-text);
}

/* ==========================================================
   LIGHT THEME  (client override — 2026-07-14)
   Direction: white background, ink (#141414) text.
   - Orange (#F6921E) stays ONLY as a CTA button fill; ink text
     on orange is ~7:1 (accessible). Orange is never used as text.
   - Sand gold is retired as a text colour (unreadable on white):
     --lk-gold is remapped to ink, so the eyebrows, prices and
     body links that read that token become ink automatically.
   - Nav and footer become light with warm hairline borders.
   - Photo sections (hero) keep their dark overlay + light text.
   Loaded LAST -> overrides the Webflow stylesheet AND the dark
   accent block above on source order. Ratios checked vs #FFFFFF.
   ========================================================== */
:root {
  /* Kofeo variables — inverted (drive all var-based surfaces/text) */
  --bg: #FFFFFF;
  --body: #2E2B26;   /* near-black warm body (~13:1) */
  --body-2: #141414;
  --title: #141414;
  --primary: #141414;

  /* LoKee tokens — inverted for light */
  --lk-bg: #FFFFFF;
  --lk-bg-deep: #FFFFFF;      /* nav/footer now light */
  --lk-surface: #F5F2EC;      /* warm off-white card / chip surface */
  --lk-surface-2: #EDE9E0;    /* input / hover surface */
  --lk-light: #141414;

  --lk-title: #141414;
  --lk-body: #2E2B26;
  --lk-muted: #6B6250;        /* warm muted text (~5.9:1) */
  --lk-faint: #8A8272;        /* placeholders (~3.1:1) */
  --lk-gold: #a5762c;         /* brass gold text accents (eyebrows/prices/links) */

  --lk-accent: #13211a;       /* Lo Kee deep olive — CTA fill */
  --lk-accent-hover: #1d3428;
  --lk-accent-pressed: #0d1510;
  --lk-accent-text: #a5762c;  /* text accents are brass */
  --lk-on-accent: #e3c485;    /* brass gold on deep olive */

  --lk-border: rgba(20, 20, 20, 0.10);
  --lk-border-strong: rgba(20, 20, 20, 0.22);
  --lk-overlay: rgba(10, 10, 9, 0.55);
}

/* --- Page + major dark surfaces -> light --- */
body {
  background-color: #FFFFFF;
  background-image: none;      /* drop the dark page-bg texture */
}
.nav-menu,
.blog-block {
  background-color: #FFFFFF;
}
.nav-menu {
  border-bottom-color: var(--lk-border-strong);   /* hairline instead of dark fill */
}

/* Transparent navbar overlays the dark hero photo on index (and inner-page
   banners) -> give it a solid white bar so ink links + logo always read. */
.navbar {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--lk-border);
}

/* index marquee sits in .location-right on the WHITE page: fade -> white,
   separator dots -> warm ink so they read. */
.location-linear {
  background-image: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0));
}
.location-linear.right {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF);
}
.location-dot {
  background-color: var(--lk-border-strong);
}

/* --- Hardcoded white TEXT -> ink (was invisible on white) --- */
.nav-button,
.nav-link,
.ft-bottom-link,
.ft-button,
.body-x-large,
.bg-color,
.body-color,
.style-head,
.link-button,
.field-label,
.contact-heading,
.success-message,
.insta-button,
.insta-link,
.chef-info,
.menu-text,
.location-slide {
  color: #141414;
}

/* Photo tiles: text sits over a dark photo overlay -> stays light.
   (contact-us .location-* photo tiles, .category-data #00000040 overlay,
   .cc-data #0009 gradient — NOT flipped to ink.) NB: the index .location-slide
   marquee lives in .location-right on the WHITE page, so it is ink (below). */
.location-data,
.location-top,
.location-bottom,
.location-info,
.category-data,
.cc-data {
  color: #FFFFFF;
}
.ft-link:hover,
.footer-link:hover,
.coming-soon-link:hover,
.pa-block:hover,
.reception-link:hover,
.left-arrow:hover,
.right-arrow:hover,
.gallery-left:hover,
.gallery-right:hover {
  color: #141414;
}

/* Muted/faint text hardcodes -> readable warm dark */
.title-info {
  color: var(--lk-muted);
}
.pass-input {
  color: #141414;
}
.pass-input::placeholder {
  color: var(--lk-faint);
}

/* --- Raised surfaces (translucent white on dark) -> subtle warm on light --- */
.nav-button,
.nav-button.home,
.ft-button,
.insta-button,
.blog-list {
  background-color: rgba(20, 20, 20, 0.04);
}

/* Icon chips that were solid white -> warm surface + border so glyph + chip read */
.password-block,
.insta-icon {
  background-color: var(--lk-surface);
  border: 1px solid var(--lk-border-strong);
}

/* Hamburger lines were white -> ink so they show on the white nav */
.center-line,
.top-line,
.bottom-line {
  background-color: #141414;
}

/* Footer inverse CTA (.ft-button._02: white fill) -> orange CTA + ink text */
.ft-button._02 {
  color: var(--lk-on-accent);
  background-color: var(--lk-accent);
  border-color: var(--lk-accent);
}
.ft-button._02:hover {
  background-color: var(--lk-accent-hover);
  border-color: var(--lk-accent-hover);
}

/* --- Borders: white / translucent-white -> warm ink (visible on white) --- */
.left-arrow,
.right-arrow,
.gallery-left,
.gallery-right,
.menu-block.trending,
.ft-social,
.blog-list {
  border-color: var(--lk-border-strong);
}
/* White hover borders -> darker ink hover (CTA hovers keep their orange). */
.nav-button:hover,
.insta-button:hover,
.ft-button:hover,
.ft-social:hover,
.gallery-left:hover,
.gallery-right:hover,
.left-arrow:hover,
.right-arrow:hover {
  border-color: rgba(20, 20, 20, 0.32);
}
.w-pagination-previous,
.w-pagination-next {
  border-color: var(--lk-border-strong);
}

/* --- Active nav distinction: accent text only, no underline strokes --- */
/* (removes the base black text-decoration underline + the orange border-bottom) */
.nav-link.w--current {
  color: var(--lk-accent-text);
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: none;
}

/* --- Photo hero keeps its dark overlay + light text --- */
.hero-title,
.hero-text,
.hero-data,
.hero-top,
.hero-link {
  color: #FFFFFF;
}
/* Hero secondary (outline) button sits over the photo -> light outline,
   inverts to white fill + ink text on hover. */
.hero .primary-button.outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero .primary-button.outline:hover {
  color: #141414;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

/* --- Other photo-tile / photo-hero sections keep light text over the photo -- */
/* index booking tile (.reserve-img #000 + .reserve-inner #0003) and menu
   category tiles (.category-data #00000040) — headings/eyebrows stay light.
   (reservation.html .booking-* sits on the WHITE .booking-wrap -> ink, untouched.) */
.reserve-heading,
.reserve-sub-title,
.category-title {
  color: #FFFFFF;
}
/* about-us story hero (.story-wrapper = about-hero.webp + #00000040 overlay) */
.story-title {
  color: #FFFFFF;
}
.story-button {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.45);
}
.story-button:hover {
  color: #141414;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

/* Giant 260px decorative watermark heading behind each page title was
   #1B1A17 (near-invisible on the old dark bg); on white it turns solid
   near-black and collides with the overlapping .title-info subtitle.
   Make it a faint warm watermark again. */
.heading {
  color: var(--lk-surface-2);
}

/* --- Monochrome white images invisible on white ------------------------- */
/* Decorative icon SVGs (social, FAQ arrow, blog arrow, insta, field icons)
   are recoloured to ink in the asset files. */

/* --- Real LoKee logo (colour PNGs on the white nav/footer) --- */
/* Nav: cropped key + LOKEE mark, sized to the bar. */
.navbar .brand img {
  height: 66px;
  width: auto;
}
/* Footer: full stacked logo, centred and capped. */
.footer-brand {
  width: auto;
  max-width: 210px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Footer logo centred on all screen sizes. */
.footer .brand {
  display: block;
  float: none;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Mobile: footer logo smaller (scoped to footer, not navbar). */
@media screen and (max-width: 767px) {
  .footer-brand {
    max-width: 140px;
  }
}

/* --- Faint warm hairlines (rgba(193,180,154,.2)) are invisible on white --- */
.nav-button,
.ft-button,
.insta-button,
.success-message,
.faq-info,
.style-inner,
.style-inner.small,
.font-style,
.button-block,
.post-block,
.chef-bottom,
.experience-title,
.booking-title,
.opening-line,
.menu-line {
  border-color: var(--lk-border-strong);
}
.style-dash,
.post-line,
.post-divider {
  background-color: var(--lk-border-strong);
}
/* Form field underlines need ~3:1 to read as bounded on white */
.input,
.textarea,
.pass-input {
  border-bottom-color: rgba(20, 20, 20, 0.34);
}

/* ==========================================================
   Menus page — full dinner menu laid out in two columns
   (.menu-columns wraps the 12 category .menu-right blocks;
   override the template's 54% single-column cap)
   ========================================================== */
.menu-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 64px;
  align-items: start;
}
.menu-columns .menu-right {
  max-width: 100%;
  grid-row-gap: 28px;
}
@media screen and (max-width: 767px) {
  .menu-columns {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}