/* =========================================================
   BEETTER — Brand tokens & primitives
   Single source for colors, typography, surfaces, utilities
   ========================================================= */
html, body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #F2C230; color: #2A2A2A; }

:root {
  --bg-0:#FAFAF7; --bg-1:#FFFFFF; --bg-2:#F6F3EA; --bg-3:#EAE5D5;
  --fg-0:#1a1a1a; --fg-1:#2A2A2A; --fg-2:#525252; --fg-3:#737373;
  --line:rgba(26,26,26,0.08); --line-strong:rgba(26,26,26,0.14);
  --card:#FFFFFF; --card-hover:#FFFDF5;
  --hex-stroke:rgba(42,42,42,0.08);
  --shadow-card: 0 10px 30px -15px rgba(20,20,20,0.15), 0 2px 8px rgba(20,20,20,0.04);
  --glow-hex: 0 0 24px rgba(242,194,48,0.20);
  --sky:
    radial-gradient(900px 600px at 25% 25%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1000px 700px at 80% 80%, rgba(178,214,255,0.75), transparent 65%),
    linear-gradient(180deg, #D9ECFF 0%, #C5E0FF 50%, #B7D7FF 100%);
}
.dark {
  --bg-0:#0B0B0B; --bg-1:#131313; --bg-2:#1C1E21; --bg-3:#24272B;
  --fg-0:#FFFFFF; --fg-1:rgba(255,255,255,0.92); --fg-2:rgba(255,255,255,0.70); --fg-3:rgba(255,255,255,0.50);
  --line:rgba(255,255,255,0.06); --line-strong:rgba(255,255,255,0.12);
  --card:#141618; --card-hover:#1A1C1E;
  --hex-stroke:rgba(255,255,255,0.05);
  --shadow-card: 0 10px 30px -15px rgba(0,0,0,0.6);
  --glow-hex: 0 0 24px rgba(242,194,48,0.25);
  --sky:
    radial-gradient(1200px 700px at 30% 30%, rgba(29,53,87,0.55), transparent 60%),
    radial-gradient(900px 600px at 80% 70%, rgba(16,42,67,0.55), transparent 60%),
    linear-gradient(180deg, #0D1B2A 0%, #132033 45%, #0F2237 100%);
}

body { background: var(--bg-0); color: var(--fg-0); transition: background .5s, color .5s; }
.surf-0 { background: var(--bg-0); }
.surf-1 { background: var(--bg-1); }
.surf-2 { background: var(--bg-2); }
.surf-3 { background: var(--bg-3); }
.surf-card { background: var(--card); }
.txt-1 { color: var(--fg-1); } .txt-2 { color: var(--fg-2); } .txt-3 { color: var(--fg-3); }
.bd { border-color: var(--line); } .bd-strong { border-color: var(--line-strong); }
.shadow-card { box-shadow: var(--shadow-card); }
.sky { background: var(--sky); }

.text-honey { color: #F2C230; }
.bg-honey { background: #F2C230; }
.bg-honey-deep { background: #E0B12B; }
.text-ink { color: #2A2A2A; }
.border-honey { border-color: #F2C230; }

.hex-grid-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 8.66v17.32L30 34.64 15 25.98V8.66L30 0z' fill='none' stroke='%23888' stroke-opacity='0.15' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.logo-dark { display: none; }
.dark .logo-light { display: none; }
.dark .logo-dark { display: inline; }

/* Hex badge */
.hex-badge {
  width: 42px; height: 42px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: inline-flex; align-items: center; justify-content: center;
  background: #F2C230; color: #2A2A2A;
}

/* Scroll margin for anchors under sticky nav */
[id] { scroll-margin-top: 100px; }

/* Language dropdown in navbar */
#langBtn { line-height: 1; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(15, 14, 8, .25);
  display: none;
  z-index: 60;
}
#langSwitch.open .lang-menu { display: block; }
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.lang-item + .lang-item { margin-top: 2px; }
.lang-item:hover { background: rgba(242,194,48,.12); }
.lang-flag { font-size: 18px; line-height: 1; }
.lang-name { flex: 1; }
.lang-code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 999px;
}
.lang-item-active {
  background: rgba(242,194,48,.18);
  color: var(--fg-1);
}
.lang-item-active .lang-code {
  background: #F2C230;
  color: #2A2A2A;
}