/*
 * Mosjid design tokens: the final tokens from the design handoff (docs/design/export/tokens/tokens.css),
 * plus the prefers-color-scheme block the handoff left out, so pages follow the phone's dark mode by default.
 * A visitor's own choice (data-theme on <html>) wins over the system setting.
 */
:root {
  --color-paper: #F5F2EA;
  --color-surface: #FFFDF7;
  --color-sunken: #EDE9DF;
  --color-ink: #1C2420;
  --color-ink-muted: #56605A;
  --color-line: #D9D3C4;
  --color-control: #6E7770;        /* TUNED from #7D867F: inputs sit on sunken (3.10 → 3.82), checkboxes on selected rows (2.90 → 3.57) */
  --color-accent: #1E5B47;
  --color-accent-pressed: #174A3A;
  --color-on-accent: #FFFDF7;
  --color-accent-soft: #D5E6DC;
  --color-due: #80540C;            /* TUNED from #8A5A0E: due on accent-soft was 4.56 (waiting tag on a selected row) → 5.07; on sunken 4.88 → 5.43 */
  --color-due-soft: #F4E7CD;
  --color-error: #9E3426;
  --color-error-soft: #F6DFD9;
  --color-press: #E6E1D5;          /* NEW: opaque pressed layer for neutral controls and rows. Ink 12.17, muted 5.00 */

  /* The mosque's colours: the deep green of the header and footer, brass for ornament on it, and for ornament on paper */
  --color-deep: #0F3D31;
  --color-deep-sunken: #0B3026;
  --color-on-deep: #F7F1E1;        /* on deep 10.6 */
  --color-on-deep-muted: #CBDACB;  /* on deep 8.0 */
  --color-brass: #C9A45C;          /* on deep 5.1 */
  --color-ornament: #A07F36;       /* star on paper 3.3: not text */
  --pattern-page: url("../images/brand/pattern-paper.svg");

  --progress-track: var(--color-sunken);
  --progress-collected: var(--color-accent);
  /* TUNED: was repeating-linear-gradient. Same 45° hatch, drawn as an SVG pattern so no gradient function is used */
  --progress-pledged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%231E5B47' stroke-width='1.5'/%3E%3C/svg%3E");
  --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent);

  --font-ui: "Noto Sans Bengali", "Noto Sans", system-ui, sans-serif;
  --font-display: "Noto Serif Bengali", "Noto Sans Bengali", serif;

  /* TUNED line heights: the brief asks for 1.5–1.6 on Bangla; several were outside it */
  --text-display: 600 32px/48px var(--font-display);   /* was 44 (1.38) */
  --text-headline: 600 24px/36px var(--font-ui);       /* was 34 (1.42) */
  --text-title: 600 20px/32px var(--font-ui);          /* was 30, moved to the 4-pt grid */
  --text-body-lg: 400 18px/28px var(--font-ui);
  --text-body: 400 16px/24px var(--font-ui);           /* was 26 (1.63) */
  --text-label: 500 14px/22px var(--font-ui);
  --text-caption: 400 13px/20px var(--font-ui);
  --text-figure-lg: 700 28px/40px var(--font-ui);      /* was 36: ৳ and Bangla digits touched the line box */
  --text-figure: 600 20px/30px var(--font-ui);         /* was 28 */
  --text-amount: 700 36px/52px var(--font-ui);         /* NEW: amount input and bid confirmation, read at arm's length */
  --text-jamaat: 700 64px/77px var(--font-ui);        /* NEW: M2 next-jamaat time only (digits) */
  --numeric: tabular-nums;                              /* NEW: font-variant-numeric on every money figure */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-full: 999px;

  --shadow-sheet: 0 -2px 12px rgba(28, 36, 32, 0.10);
  --shadow-dialog: 0 4px 16px rgba(28, 36, 32, 0.14); /* NEW: the sheet shadow points up, wrong for a centred dialog */

  --duration-fast: 150ms; --duration: 200ms; --duration-slow: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  --touch-min: 48px; --touch-gap: 8px; /* NEW: minimum space between touch targets */ --icon-sm: 20px; --icon-md: 24px; --icon-stroke: 1.75; --content-max: 1120px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-deep: #0C2A22;
  --color-deep-sunken: #08201A;
  --color-on-deep: #F0E9D8;
  --color-on-deep-muted: #BFCDC1;
  --color-brass: #D4B26A;
  --color-ornament: #BD9B55;
  --pattern-page: url("../images/brand/pattern-dark.svg");
  --color-paper: #111513;
  --color-surface: #191E1B;
  --color-sunken: #0C0F0D;
  --color-ink: #E8E5DC;
  --color-ink-muted: #A3ABA5;
  --color-line: #2E3531;
  --color-control: #7E8781;        /* TUNED from #6F7872: on accent-soft was 2.70 → 3.33; on surface 3.71 → 4.56 */
  --color-accent: #7CC2A4;
  --color-accent-pressed: #94D1B6;
  --color-on-accent: #0E1F18;
  --color-accent-soft: #1F3A2F;
  --color-due: #E3AE55;
  --color-due-soft: #3A2C14;
  --color-error: #EE8B79;
  --color-error-soft: #3D211C;
  --color-press: #242A26;          /* NEW: ink 11.62, muted 6.22 */
  --progress-pledged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%237CC2A4' stroke-width='1.5'/%3E%3C/svg%3E");
  --shadow-sheet: 0 -2px 12px rgba(0, 0, 0, 0.40);
  --shadow-dialog: 0 4px 16px rgba(0, 0, 0, 0.50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-deep: #0C2A22;
    --color-deep-sunken: #08201A;
    --color-on-deep: #F0E9D8;
    --color-on-deep-muted: #BFCDC1;
    --color-brass: #D4B26A;
    --color-ornament: #BD9B55;
    --pattern-page: url("../images/brand/pattern-dark.svg");
    --color-paper: #111513;
    --color-surface: #191E1B;
    --color-sunken: #0C0F0D;
    --color-ink: #E8E5DC;
    --color-ink-muted: #A3ABA5;
    --color-line: #2E3531;
    --color-control: #7E8781;        /* TUNED from #6F7872: on accent-soft was 2.70 → 3.33; on surface 3.71 → 4.56 */
    --color-accent: #7CC2A4;
    --color-accent-pressed: #94D1B6;
    --color-on-accent: #0E1F18;
    --color-accent-soft: #1F3A2F;
    --color-due: #E3AE55;
    --color-due-soft: #3A2C14;
    --color-error: #EE8B79;
    --color-error-soft: #3D211C;
    --color-press: #242A26;          /* NEW: ink 11.62, muted 6.22 */
    --progress-pledged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%237CC2A4' stroke-width='1.5'/%3E%3C/svg%3E");
    --shadow-sheet: 0 -2px 12px rgba(0, 0, 0, 0.40);
    --shadow-dialog: 0 4px 16px rgba(0, 0, 0, 0.50);
  }
}