/* The Stockvel App — shared foundations (brand tokens from Section 3 and the UI drafts) */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pjs-400.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/pjs-600.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/pjs-700.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/pjs-800.woff2) format('woff2'); }

:root {
  --green: #0A7F3F;
  --deep: #064E2A;
  --mint: #E8F5EC;
  --white: #FFFFFF;
  --gold: #F2B705;
  --ink: #0F1A14;
  --slate: #5B6B62;
  --red: #C62828;

  --ink-2: #33473B;
  --line: #E1EBE4;
  --mint-line: #CDE9D6;
  --soft: #F2F6F3;
  --leaf: #33A866;
  --pale: #9FDDB5;
  --pale-text: #BFE6CC;
  --gold-bg: #FFF6D6;
  --gold-ink: #6B5000;
  --gold-deep: #C79300;
  --red-bg: #FDECEC;

  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --pill: 999px;
  --fast: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--deep); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--deep); color: #fff; padding: 12px 18px; border-radius: var(--pill); font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: var(--pill);
  font-size: 1.125rem; font-weight: 800; border: 0; text-align: center;
  transition: transform var(--fast) ease, background-color var(--fast) ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--deep); color: #fff; }
.btn-soft { background: var(--mint); color: var(--deep); border: 1.5px solid var(--mint-line); }
.btn-soft:hover { color: var(--deep); background: #dcefe2; }
.btn-white { background: #fff; color: var(--deep); }
.btn-white:hover { color: var(--deep); background: var(--mint); }
.btn-outline { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.08); }
.btn-danger { background: #fff; color: var(--red); border: 1.5px solid #F2C4C4; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.demo-badge {
  display: inline-flex; align-items: center; background: var(--gold-bg); color: var(--gold-ink);
  font-size: .75rem; font-weight: 800; border-radius: 6px; padding: 5px 8px; letter-spacing: .6px;
}

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

/* Native-like page slide between screens (Chrome 126+, progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease both vt-out; }
::view-transition-new(root) { animation: 220ms ease both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media print {
  .no-print, nav, header.topbar, .fab, .tabs { display: none !important; }
  body { color: #000; }
}