/* myHood — design tokens
   Ported 1:1 from postman/mobile-app-screens/styles.css so the web app (resident,
   exco, super admin) shares one visual language with the mobile app.
   Leaf Green (#4CAF50 family) + Ember Orange (#FF5722 family) on warm stone neutrals.
   Type: Segoe UI Semibold (display) + Calibri (body) + Consolas (tabular data). */

:root {
  --bg: #F3F5F0;
  --surface: #FFFFFF;
  --surface-2: #E9ECE4;
  --ink: #1C2420;
  --ink-soft: #5B6459;
  --ink-faint: #8A9284;
  --line: #DEE2D7;

  --accent: #4CAF50;
  --accent-strong: #2E7D32;
  --accent-ink: #FFFFFF;
  --accent-tint: #E3F1E4;

  --orange: #FF5722;
  --orange-strong: #D84315;
  --orange-ink: #FFFFFF;
  --orange-soft: #FFE0D3;

  --success: #2E7D32;
  --success-soft: #E3F1E4;
  --warning: #C98A1B;
  --warning-soft: #FBEBD1;
  --critical: #C62828;
  --critical-soft: #FAD9D7;

  --shadow: 0 1px 2px rgba(28, 36, 32, 0.06), 0 6px 16px rgba(28, 36, 32, 0.07);
  --shadow-card: 0 2px 6px rgba(28, 36, 32, 0.05), 0 10px 24px rgba(28, 36, 32, 0.08);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12160F;
    --surface: #1C2119;
    --surface-2: #232A1F;
    --ink: #ECEFE6;
    --ink-soft: #A6AE9C;
    --ink-faint: #707B67;
    --line: #2E362A;

    --accent: #6FCB74;
    --accent-strong: #8FDB92;
    --accent-ink: #0D170D;
    --accent-tint: #1E2E1E;

    --orange: #FF7A50;
    --orange-strong: #FFA184;
    --orange-ink: #1F0A03;
    --orange-soft: #3A2016;

    --success: #6FCB74;
    --success-soft: #1E2E1E;
    --warning: #E3AC4E;
    --warning-soft: #3A2C13;
    --critical: #E2685F;
    --critical-soft: #3A1E1A;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #12160F; --surface: #1C2119; --surface-2: #232A1F; --ink: #ECEFE6; --ink-soft: #A6AE9C; --ink-faint: #707B67;
  --line: #2E362A; --accent: #6FCB74; --accent-strong: #8FDB92; --accent-ink: #0D170D; --accent-tint: #1E2E1E;
  --orange: #FF7A50; --orange-strong: #FFA184; --orange-ink: #1F0A03; --orange-soft: #3A2016;
  --success: #6FCB74; --success-soft: #1E2E1E; --warning: #E3AC4E; --warning-soft: #3A2C13; --critical: #E2685F; --critical-soft: #3A1E1A;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] {
  --bg: #F3F5F0; --surface: #FFFFFF; --surface-2: #E9ECE4; --ink: #1C2420; --ink-soft: #5B6459; --ink-faint: #8A9284;
  --line: #DEE2D7; --accent: #4CAF50; --accent-strong: #2E7D32; --accent-ink: #FFFFFF; --accent-tint: #E3F1E4;
  --orange: #FF5722; --orange-strong: #D84315; --orange-ink: #FFFFFF; --orange-soft: #FFE0D3;
  --success: #2E7D32; --success-soft: #E3F1E4; --warning: #C98A1B; --warning-soft: #FBEBD1; --critical: #C62828; --critical-soft: #FAD9D7;
  --shadow: 0 1px 2px rgba(28, 36, 32, 0.06), 0 6px 16px rgba(28, 36, 32, 0.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: Calibri, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; font-weight: 700; }
.font-mono { font-family: Consolas, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
a { color: var(--accent-strong); }