/* Blokwear shared brand tokens & primitives — used by / (landing) and /app */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --ink: #0A0A0A; --paper: #F2F0EA; --coral: #D85A30;
  --coral-dark: #4A1B0C; --pine: #0F6E56; --choc: #4A2E1E;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.display { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.5px; }
.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 1.5px; }
button { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }

nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; max-width: 640px; margin: 0 auto; }
.logo-lockup { display: flex; align-items: center; gap: 10px; }
.blok-mark { --mark-size: 19px; display: grid; grid-template-columns: repeat(2, var(--mark-size)); grid-template-rows: repeat(2, var(--mark-size)); gap: 3px; }
.mark-sq { display: flex; align-items: center; justify-content: center; width: var(--mark-size); height: var(--mark-size); border-radius: calc(var(--mark-size) * 0.18); font-family: 'Archivo Black', sans-serif; font-size: calc(var(--mark-size) * 0.5); line-height: 1; }
.mark-b { background: var(--ink); color: var(--paper); border: 1px solid #F2F0EA40; }
.mark-l { background: var(--coral); color: var(--coral-dark); }
.mark-o { background: var(--pine); color: var(--paper); }
.mark-k { background: var(--paper); color: var(--ink); border: 1px solid #0A0A0A2A; }
.wordmark { font-size: 19px; letter-spacing: 2px; color: var(--ink); }