/* Bangla font, self-hosted so every device shows the same letterforms. Kalpurush, SIL OFL. */
@font-face {
  font-family: "Kalpurush Web";
  src: url("../fonts/kalpurush.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D, U+25CC;
}

/* Design tokens: every colour, size and radius used by the UI comes from here. */
:root {
  color-scheme: light dark;

  /* Brand */
  --brand: #a24634;
  --brand-dark: #873525;
  --brand-soft: #f7e7df;
  --on-brand: #ffffff;
  --accent: #d9922e;

  /* Surfaces */
  --bg: #fff9f1;
  --surface: #ffffff;
  --surface-2: #faf3ea;
  --line: #e8ddd0;
  --ink: #302923;
  --muted: #746a62;
  --overlay: rgba(48, 31, 25, .55);

  /* Status */
  --ok: #256746;
  --ok-bg: #e5f3ea;
  --warn: #75500d;
  --warn-bg: #fff0d2;
  --danger: #9d3835;
  --danger-bg: #fae6e3;
  --neutral: #5f5751;
  --neutral-bg: #eee8e2;

  /* Type */
  --font: "Kalpurush Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* Space (4px scale) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow: 0 6px 22px rgba(74, 42, 29, .08);
  --shadow-up: 0 -6px 22px rgba(74, 42, 29, .08);

  /* App chrome */
  --appbar-h: 56px;
  --tabbar-h: 64px;
  --tap: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #d9775f;
    --brand-dark: #e58f79;
    --brand-soft: #3a231d;
    --on-brand: #1d100c;
    --bg: #1a1411;
    --surface: #251d19;
    --surface-2: #2e2521;
    --line: #3d322c;
    --ink: #f3ebe4;
    --muted: #b3a79d;
    --overlay: rgba(0, 0, 0, .65);
    --ok: #7fd1a1;
    --ok-bg: #16301f;
    --warn: #f0c877;
    --warn-bg: #3a2e12;
    --danger: #f19a94;
    --danger-bg: #3a1c1a;
    --neutral: #cfc4ba;
    --neutral-bg: #372e29;
    --shadow: 0 6px 22px rgba(0, 0, 0, .35);
    --shadow-up: 0 -6px 22px rgba(0, 0, 0, .35);
  }
}