/* =====================================================================
   CircleMeUp design tokens — the ONLY place brand values live.
   Brand guidelines §16, verbatim, then mapped onto Bootstrap 5.3's own
   variables so every Bootstrap component already looks like CircleMeUp.
   Change a colour, radius or font here and the whole site follows.
   Dark theme: <html data-bs-theme="dark"> (set from the phone's setting
   or the person's choice — see templates/layouts/base.html).
   ===================================================================== */

/* ── Fonts: self-hosted, only the weights we use ───────────────────── */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }
/* Mukta downloads only when Devanagari text is on the page. */
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+A8E0-A8FF;
  src: url("../fonts/mukta-devanagari-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 700; font-display: swap; unicode-range: U+0900-097F, U+A8E0-A8FF;
  src: url("../fonts/mukta-devanagari-700-normal.woff2") format("woff2"); }

:root,
[data-bs-theme="light"] {
  /* ── brand (never change between themes) ── */
  --cmu-marigold: #FFB01F;
  --cmu-lagoon: #12968C;
  --cmu-petal: #FF6FA8;
  --cmu-marigold-light: #FFE3A8;
  --cmu-lagoon-light: #7FD8CF;
  --cmu-petal-light: #FFB6D3;
  --cmu-ink: #1C1828;
  --cmu-paper: #F6F4FA;

  /* ── theme ── */
  --bg: #F6F4FA;
  --surface: #FFFFFF;
  --text: #1C1828;
  --text-muted: #5D576E;
  --line: #E2DEEA;
  --line-strong: #CFC9DB;
  --tint: #EFEBF6;
  --success: #0B6F68;
  --error: #B4235E;
  --warning: #8A5A00;
  --on-ink-muted: #BDB6CF;
  --wash-lagoon: #CFF0EC;
  --wash-petal: #FFD3E5;
  --wash-marigold: var(--cmu-marigold-light);
  --scrim: rgba(28, 24, 40, .48);
  --shadow-float: 0 12px 32px rgba(28, 24, 40, .16), 0 2px 6px rgba(28, 24, 40, .08);

  /* ── type ── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", "Mukta", system-ui, sans-serif;
  --font-indic: "Mukta", "Figtree", sans-serif;

  /* ── space, shape, motion ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-join: cubic-bezier(.2, .9, .25, 1.2);
  --topbar-h: 60px;
  --tabbar-h: 64px;
  --content-max: 1200px;

  /* ── Bootstrap, mapped onto the brand ── */
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 246, 244, 250;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 28, 24, 40;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.625;
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--tint);
  --bs-tertiary-bg: var(--tint);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-primary: var(--cmu-ink);
  --bs-primary-rgb: 28, 24, 40;
  --bs-success: var(--success);
  --bs-success-rgb: 11, 111, 104;
  --bs-danger: var(--error);
  --bs-danger-rgb: 180, 35, 94;
  --bs-warning: var(--cmu-marigold);
  --bs-warning-rgb: 255, 176, 31;
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 28, 24, 40;
  --bs-link-hover-color: var(--text);
  --bs-link-hover-color-rgb: 28, 24, 40;
  --bs-focus-ring-color: rgba(255, 176, 31, .55);
  --bs-box-shadow: var(--shadow-float);
  --bs-box-shadow-lg: var(--shadow-float);
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --bg: #15121D;
  --surface: #1E1A29;
  --text: #F1EEF7;
  --text-muted: #A8A2B8;
  --line: #322C41;
  --line-strong: #463F58;
  --tint: #242032;
  --success: #3FD0C1;
  --error: #FF8DB8;
  --warning: #FFC24D;
  --wash-lagoon: #123B3A;
  --wash-petal: #3E1A2C;
  --wash-marigold: #3D2E10;
  --scrim: rgba(0, 0, 0, .62);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);

  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 21, 18, 29;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 241, 238, 247;
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--tint);
  --bs-tertiary-bg: var(--tint);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-primary: var(--cmu-paper);
  --bs-primary-rgb: 246, 244, 250;
  --bs-success: var(--success);
  --bs-danger: var(--error);
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 241, 238, 247;
  --bs-link-hover-color: var(--text);
  --bs-link-hover-color-rgb: 241, 238, 247;
  color-scheme: dark;
}