/* TSTE landing-page shared brand layer.
   Single source for logo, container width, core color tokens, and typography.
   Consumed by index.html, partner.html, restaurant-portal.html,
   restaurant-portal-dashboard.html, restaurant-portal-onboarding.html (+ de/ variants).
   Does NOT hold button/shadow/animation personality -- those stay page-local so the
   main site can stay playful while partner/portal pages stay a flatter, sober B2B tone. */

:root {
  --bg: #FAF8F5;
  --ink: #1F2641;
  --ink-2: #555E6E;
  --paper: #FFFFFF;
  --rust: #C73E1D;
  --rust-dark: #A83218;
  --line: rgba(31,38,65,0.10);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Libre Franklin', system-ui, sans-serif;

  --maxw: 1180px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.brand {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-weight: 800; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--ink);
  text-decoration: none;
}
.brand .logo { width: 34px; height: 34px; border-radius: 9px; }

/* ---- B2B personality: partner + portal pages only (login, dashboard, onboarding, partner) ----
   Flatter than the main site's .btn-primary/.btn-ghost/.btn-light: no shadow, no hover-lift,
   same --rust brand color. The main site keeps its own playful button classes untouched. */
.btn-b2b {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer; text-decoration: none;
  background: var(--rust); color: #fff;
  padding: 13px 24px; border-radius: 10px;
  min-height: 44px;
  transition: background-color .15s ease;
}
.btn-b2b:hover { background: var(--rust-dark); }
.btn-b2b:focus-visible { outline: 2px solid var(--rust-dark); outline-offset: 2px; }

.btn-b2b-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; text-decoration: none;
  background: transparent; color: var(--rust); border: 1.5px solid var(--rust);
  padding: 11.5px 22px; border-radius: 10px;
  min-height: 44px;
  transition: background-color .15s ease, color .15s ease;
}
.btn-b2b-ghost:hover { background: var(--rust); color: #fff; }
.btn-b2b-ghost:focus-visible { outline: 2px solid var(--rust-dark); outline-offset: 2px; }

/* ---- language switcher: shared across partner + portal pages ---- */
.lang { display: flex; gap: 2px; background: rgba(31,38,65,0.06); border-radius: 100px; padding: 3px; font-size: 0.8rem; font-weight: 600; }
.lang a { padding: 5px 11px; border-radius: 100px; color: var(--ink-2); text-decoration: none; }
.lang a.active { background: var(--paper); color: var(--rust); }
.lang a:focus-visible { outline: 2px solid var(--rust-dark); outline-offset: 2px; }

/* ---- footer: shared across all pages ---- */
footer { background: var(--ink); color: rgba(255,255,255,0.65); padding: 54px 0 30px; position: relative; z-index: 2; }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 36px; }
.foot-brand { max-width: 280px; }
.foot-brand .brand { color: #fff; margin-bottom: 12px; }
.foot-brand p { font-size: 0.88rem; }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h3 { color: #fff; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 14px; }
.foot-col a { display: block; font-size: 0.88rem; margin-bottom: 9px; color: rgba(255,255,255,0.65); text-decoration: none; }
.foot-col a:hover { color: var(--rust); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }