/* ==========================================================================
   NIVASA — Design Tokens
   A society/community management system.
   Palette rationale: deep teal = civic trust & permanence (the building,
   the record-book); marigold/saffron = the warmth of festivals, notices,
   community life. The corner-bracket "scan target" motif recurs across
   cards, focus rings and the QR visitor flow — a nod to the gatehouse
   scanner that is the literal front door of the product.
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --color-primary-50:  #eef5f3;
  --color-primary-100: #d3e6e1;
  --color-primary-300: #6fa89c;
  --color-primary-500: #1f5c52;
  --color-primary-600: #184a42;
  --color-primary-700: #123d36;
  --color-primary-900: #0b2521;

  --color-accent-300: #f2c481;
  --color-accent-500: #e08a2b;
  --color-accent-600: #c26f18;

  --color-danger-500: #c0443a;
  --color-danger-600: #a3362d;
  --color-success-500: #2e8b57;
  --color-warning-500: #d9a441;
  --color-info-500: #3574c9;

  /* ---- Neutrals (light theme default) ----------------------------------- */
  --color-bg: #f6f4ef;
  --color-bg-alt: #eeebe2;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.66);
  --color-border: #e2ddd0;
  --color-text: #1a2421;
  --color-text-muted: #5b6d68;
  --color-text-faint: #8b9a95;

  --shadow-sm: 0 1px 2px rgba(18, 30, 27, 0.06), 0 1px 1px rgba(18, 30, 27, 0.04);
  --shadow-md: 0 6px 16px rgba(18, 30, 27, 0.08), 0 2px 6px rgba(18, 30, 27, 0.05);
  --shadow-lg: 0 16px 40px rgba(18, 30, 27, 0.14), 0 4px 12px rgba(18, 30, 27, 0.08);
  --shadow-glass-border: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---- Typography --------------------------------------------------------
     Display: Sora (geometric, confident, used sparingly for headings)
     Body:    Inter (neutral, highly legible across Latin + Indic transliteration)
     Data:    IBM Plex Mono (tabular figures, amounts, IDs, timestamps)
  --------------------------------------------------------------------------*/
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 2.75rem;

  /* ---- Spacing / radius / layout ---------------------------------------- */
  --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: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 68px;

  --transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --transition-base: 220ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 420ms cubic-bezier(.4,0,.2,1);

  --z-sidebar: 100;
  --z-topbar: 90;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---- Dark theme ---------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg: #0e1613;
  --color-bg-alt: #0a100e;
  --color-surface: #172420;
  --color-surface-glass: rgba(23, 36, 32, 0.66);
  --color-border: #263832;
  --color-text: #eef2ef;
  --color-text-muted: #9fb0ab;
  --color-text-faint: #6b7d78;

  --color-primary-50: #12211d;
  --color-primary-100: #1a332c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.45);
  --shadow-glass-border: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}