/* =====================================================================
 * fundora-brand.css — design tokens + base components
 *
 * Source: tokens extracted from Fundora-Brandbook 2026-04-27 (zip not
 * committed). Component CSS reverse-engineered from class usage in
 * apps/lead-web/index.html and grant-detail.html (inline <style>
 * blocks define landing-specific bits, this file owns base components
 * referenced from outside those blocks: .btn, .tag, .topnav, .field,
 * .input, .kbd, .theme-toggle, .dot).
 *
 * Owner: Big (Track B). Lin built this temporary stub during M1 infra
 * bootstrap so the lead-magnet renders. Big should rewrite as needed.
 * ===================================================================== */

/* ---------- WEB FONTS ---------- */

/*
 * e-Ukraine and e-Ukraine Head — Ministry of Digital Transformation
 * of Ukraine / Diia · CC BY 4.0
 * Source: https://thedigital.gov.ua/fonts?BA1I4Zljkz=A0cAjNx8
 * Conversion: official .otf → .woff2 via Python fontTools (2026-04-30).
 * Notice: ./fonts/NOTICE.md
 *
 * `font-display: swap` keeps the page text readable while the web
 * font streams; `unicode-range` keeps Latin + Cyrillic in-range so
 * the browser can short-circuit unused subsets later if we ever
 * subset.
 */

@font-face {
  font-family: 'e-Ukraine';
  src: url('./fonts/e-Ukraine-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine';
  src: url('./fonts/e-Ukraine-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine';
  src: url('./fonts/e-Ukraine-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine Head';
  src: url('./fonts/e-UkraineHead-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine Head';
  src: url('./fonts/e-UkraineHead-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine Head';
  src: url('./fonts/e-UkraineHead-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  --bg-0:    #07090D;
  --bg-1:    #0A0D12;
  --bg-2:    #10151C;
  --bg-3:    #151B24;
  --line-1:  #1A2029;
  --line-2:  #242C38;

  --fg-1:    #E8EAED;
  --fg-2:    #A0A8B4;
  --fg-3:    #6B7280;
  --fg-4:    #3F4754;
  --fg-inv:  #0A0D12;

  --ok:        #22C55E;
  --ok-dim:    #0E3A1E;
  --ok-text:   #22C55E;
  --warn:      #EAB308;
  --warn-dim:  #3A2F0B;
  --danger:    #EF4444;
  --danger-dim:#3B1414;
  --info:      #A0A8B4;

  --primary-fg: #051708;
  --paper:      #F5F4F0;

  --font-sans: 'e-Ukraine', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'e-Ukraine Head', 'e-Ukraine', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'e-Ukraine', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-0:    0px;
  --r-1:    2px;
  --r-pill: 999px;

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 56px;
}

/* Light theme */
[data-theme="light"] {
  --bg-0:    #F5F4F0;
  --bg-1:    #FBFAF6;
  --bg-2:    #F0EEE7;
  --bg-3:    #E7E4DA;
  --line-1:  #E0DCCF;
  --line-2:  #C8C3B3;

  --fg-1:    #0A0D12;
  --fg-2:    #4A515C;
  --fg-3:    #767A83;
  --fg-4:    #B0AEA6;
  --fg-inv:  #F5F4F0;

  --ok:        #16803D;
  --ok-dim:    #D4EBDB;
  --ok-text:   #16803D;
  --warn:      #9A7B0B;
  --warn-dim:  #F4E9C4;
  --danger:    #C62828;
  --danger-dim:#F5D6D6;
  --info:      #4A515C;

  --primary-fg: #FFFFFF;
}

/* ---------- BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","kern","liga","calt";
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- TOPNAV ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg-0) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-1);
}
.topnav-inner {
  max-width: 1320px; margin: 0 auto; padding: 14px var(--s-7);
  display: flex; align-items: center; gap: var(--s-6);
}
.topnav-logo {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: var(--fg-1);
}
.topnav-mid {
  flex: 1; display: flex; align-items: center; gap: var(--s-5);
  font-size: 14px; color: var(--fg-2);
}
.topnav-mid a:hover { color: var(--fg-1); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 10px 18px;
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer; transition: all 120ms ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--fg-2); color: var(--fg-1); background: var(--bg-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary {
  background: var(--ok); color: var(--primary-fg); border-color: var(--ok);
}
.btn--primary:hover {
  background: color-mix(in oklab, var(--ok) 88%, #fff);
  border-color: color-mix(in oklab, var(--ok) 88%, #fff);
  color: var(--primary-fg);
}

.btn--secondary {
  background: var(--bg-2); color: var(--fg-1); border-color: var(--line-2);
}
.btn--secondary:hover { background: var(--bg-3); border-color: var(--fg-3); }

.btn--ghost {
  background: transparent; color: var(--fg-2); border-color: transparent;
}
.btn--ghost:hover { color: var(--fg-1); background: var(--bg-2); }

.btn--lg { padding: 14px 22px; font-size: 15px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }

/* ---------- TAGS / CHIPS ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line-1); border-radius: var(--r-1);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap;
}
.tag--ok    { color: var(--ok-text);  background: var(--ok-dim);     border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.tag--warn  { color: var(--warn);     background: var(--warn-dim);   border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.tag--danger{ color: var(--danger);   background: var(--danger-dim); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }

.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; flex-shrink: 0;
}

/* ---------- FORM PRIMITIVES ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--fg-3); text-transform: uppercase; font-weight: 500;
}
.field-hint {
  font-size: 12px; color: var(--fg-3); line-height: 1.5;
}
.input {
  width: 100%;
  background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  padding: 11px 14px;
  font-family: var(--font-sans); font-size: 14.5px;
  outline: none; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input::placeholder { color: var(--fg-3); }
.input:focus { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }

/* ---------- KBD ---------- */
.kbd {
  display: inline-block;
  padding: 2px 7px; min-width: 18px; text-align: center;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle {
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-1);
}
.theme-toggle button {
  background: transparent; color: var(--fg-3);
  border: 0; padding: 5px 11px; font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer; border-radius: var(--r-1);
  transition: background 120ms ease, color 120ms ease;
}
.theme-toggle button:hover { color: var(--fg-1); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--bg-0); color: var(--fg-1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- ANIMATION HELPERS ---------- */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}