/* ═══════════════════════════════════════════════════════════
   SONA design tokens & shared components
   Kierunek: awarded interactive, 2-kolor palette, WebGL signature
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Cabinet'; font-weight: 500; font-style: normal;
  src: url('fonts/cabinet-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cabinet'; font-weight: 700; font-style: normal;
  src: url('fonts/cabinet-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cabinet'; font-weight: 800; font-style: normal;
  src: url('fonts/cabinet-800.woff2') format('woff2'); font-display: swap; }

@font-face { font-family: 'Geist'; font-weight: 100 900; font-style: normal;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
  font-display: swap; }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-style: normal;
  src: url('fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
  font-display: swap; }
@font-face { font-family: 'GeistMono'; font-weight: 100 900; font-style: normal;
  src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-display: swap; }

:root {
  --ink:       #0A0F1C;
  --ink-2:     #141A2A;
  --ink-3:     #1E2538;
  --ink-4:     #2A3247;
  --bone:      #F1EDE3;
  --bone-dim:  rgba(241, 237, 227, 0.68);
  --bone-mute: rgba(241, 237, 227, 0.42);
  --bone-faint: rgba(241, 237, 227, 0.22);
  --hair:      rgba(241, 237, 227, 0.08);
  --line:      rgba(241, 237, 227, 0.14);
  --amber:     #F5A44A;
  --amber-hot: #FFB65A;
  --amber-dim: rgba(245, 164, 74, 0.20);
  --success:   #6ADFB0;
  --error:     #E67885;

  --display: 'Cabinet', ui-sans-serif, system-ui, sans-serif;
  --text:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono:    'GeistMono', ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: 16px; line-height: 1.55;
  min-height: 100vh;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); letter-spacing: 0; }
.display { font-family: var(--display); letter-spacing: -0.02em; }

.k-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-mute);
}

/* Buttons ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-family: var(--text); font-size: 13px; font-weight: 500;
  transition: transform .2s, filter .2s, background .2s;
  cursor: pointer; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--amber); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 rgba(245, 164, 74, 0);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(245, 164, 74, 0.55); }
.btn.bone {
  background: var(--bone); color: var(--ink); font-weight: 600;
}
.btn.bone:hover { transform: translateY(-2px); }
.btn.ghost {
  background: transparent; color: var(--bone-dim);
  border: 1px solid var(--line);
}
.btn.ghost:hover { color: var(--bone); border-color: var(--bone-dim); background: rgba(241,237,227,0.04); }
.btn.small { padding: 8px 14px; font-size: 12px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; filter: none; }

/* Cards ────────────────────────────────── */

.card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  transition: transform .25s, border-color .25s;
}
.card.pad-lg { padding: 32px; }
.card.hot { border-color: var(--amber-dim); }
.card:hover.hover-lift { transform: translateY(-3px); border-color: rgba(245,164,74,0.3); }

/* Live region ──────────────────────────── */

.sr-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 10px 16px; background: var(--amber); color: var(--ink);
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Motion respect ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}