/* Bedamu base: tokens, reset, buttons. Shared by the website and the app. */
:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #efece4;
  --ink: #16201b;
  --ink-2: #3c4842;
  --muted: #6c7670;
  --line: #e2ded4;
  --primary: #0e6b50;
  --primary-2: #0b5a43;
  --primary-soft: #dcefe7;
  --on-primary: #ffffff;
  --accent: #f2a93b;
  --accent-soft: #fdf0d8;
  --danger: #b4342b;
  --danger-soft: #fbe5e2;
  --ok: #0e7a52;
  --ok-soft: #dcf3e8;
  --warn: #9a5b00;
  --warn-soft: #fff1d6;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(22, 32, 27, .06), 0 4px 16px rgba(22, 32, 27, .06);
  --shadow-lg: 0 12px 40px rgba(22, 32, 27, .18);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1412;
    --surface: #171e1b;
    --surface-2: #1f2824;
    --ink: #eef2ef;
    --ink-2: #c9d2cd;
    --muted: #8f9a94;
    --line: #2a3530;
    --primary: #2fa37c;
    --primary-2: #3bb88d;
    --primary-soft: #173a2e;
    --on-primary: #06140f;
    --accent-soft: #3a2c12;
    --danger: #ef7d73;
    --danger-soft: #3d1c19;
    --ok: #4cc795;
    --ok-soft: #153526;
    --warn: #f2b84f;
    --warn-soft: #3a2c12;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--primary-2); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.soft { background: var(--primary-soft); color: var(--primary); }
.btn.soft:hover { background: color-mix(in srgb, var(--primary-soft) 80%, var(--primary)); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn svg { width: 20px; height: 20px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 600; cursor: pointer; }
.link-btn.danger { color: var(--danger); }

/* Inter + Inter Tight, self-hosted (SIL Open Font License), latin subset. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/intertight-latin.woff2) format("woff2"); }