/* ─────────────────────────────────────────────────────────────
   PestScope — refreshed design tokens
   Extends the existing live-tokens.css shipping in the app.
   Same naming convention; only adds where there's a real gap.
   ───────────────────────────────────────────────────────────── */

/* ── Font ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ── Dark mode (default) ── */
:root {
  /* Surfaces — widened the page↔surface contrast vs. live tokens */
  --page-bg: #1F2422;
  --surface: #2A2F2D;
  --surface-2: #333836;        /* NEW — for nested cards / sticky bars */
  --surface-hover: #3A3F3D;
  --surface-accent: #1B5E54;
  --surface-soft: rgba(46, 148, 132, 0.12); /* NEW — for chip / pill backgrounds */
  --sidebar: #12403A;
  --sidebar-active: #1B5E54;
  --scrim: rgba(0, 0, 0, 0.55); /* NEW — backdrop for sheets / dialogs */

  /* Text */
  --text-primary: #E2F0EE;
  --text-secondary: #A9B0AE;   /* bumped from #A0A4A2 for AAA on surface */
  --text-tertiary: #7A8280;
  --text-on-primary: #FFFFFF;

  /* Borders */
  --border: #4A4E4C;
  --border-subtle: #353937;

  /* Inputs */
  --input-bg: #333836;

  /* Brand — teal (matches logo, unchanged) */
  --primary: #2E9484;
  --primary-hover: #5DB8AA;
  --primary-pressed: #1F7A6D;
  --focus-ring: rgba(46, 148, 132, 0.35);

  /* Status — semantic, with "soft" pill backgrounds */
  --status-green: #2E8B2E;
  --status-orange: #E8851B;
  --status-red: #D43333;
  --status-blue: #2A78C2;
  --status-green-soft:  rgba(46, 139, 46, 0.18);
  --status-orange-soft: rgba(232, 133, 27, 0.18);
  --status-red-soft:    rgba(212, 51, 51, 0.18);
  --status-blue-soft:   rgba(42, 120, 194, 0.18);

  /* Spacing — extended to 9 steps */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;          /* NEW step (was: jump from 8 → 16) */
  --space-base:16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;          /* NEW — sheets, full-screen dialogs */
  --radius-pill: 999px;

  /* Shadows (dark) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5); /* upward, for bottom sheets */

  /* Type — locked scale */
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-36: 36px;

  /* Layout — used by app shell */
  --sidebar-w-desktop: 232px;
  --sidebar-w-tablet:  64px;
  --topbar-h-mobile:   56px;
  --bottomnav-h-mobile:64px;

  /* Touch target floor */
  --hit: 44px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

/* ── Light mode ── */
[data-theme="light"] {
  --page-bg: #F5F8F8;
  --surface: #FFFFFF;
  --surface-2: #F0F4F4;
  --surface-hover: #EAEFEE;
  --surface-accent: #E2F0EE;
  --surface-soft: rgba(31, 122, 109, 0.08);
  --sidebar: #12403A;
  --sidebar-active: #1B5E54;
  --scrim: rgba(15, 25, 23, 0.45);

  --text-primary: #1B2421;
  --text-secondary: #4D5560;   /* bumped from #666 for AA on F5F8F8 */
  --text-tertiary: #7A8280;
  --text-on-primary: #FFFFFF;

  --border: #DDE3E2;
  --border-subtle: #ECEFEE;

  --input-bg: #FFFFFF;

  --primary: #1F7A6D;
  --primary-hover: #2E9484;
  --primary-pressed: #155A50;
  --focus-ring: rgba(31, 122, 109, 0.30);

  --status-green-soft:  rgba(46, 139, 46, 0.12);
  --status-orange-soft: rgba(232, 133, 27, 0.12);
  --status-red-soft:    rgba(212, 51, 51, 0.10);
  --status-blue-soft:   rgba(42, 120, 194, 0.10);

  --shadow-sm: 0 1px 2px rgba(15, 25, 23, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 25, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 25, 23, 0.12);
  --shadow-sheet: 0 -8px 32px rgba(15, 25, 23, 0.12);

  color-scheme: light;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--text-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── Type scale ── */
.t-h1   { font-size: var(--text-30); font-weight: 700; line-height: 1.2;  letter-spacing: -0.01em; }
.t-h2   { font-size: var(--text-24); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
.t-h3   { font-size: var(--text-20); font-weight: 700; line-height: 1.3; }
.t-h4   { font-size: var(--text-18); font-weight: 600; line-height: 1.35; }
.t-body { font-size: var(--text-14); font-weight: 400; line-height: 1.5; }
.t-body-strong { font-size: var(--text-14); font-weight: 600; line-height: 1.5; }
.t-meta { font-size: var(--text-13); font-weight: 500; color: var(--text-secondary); }
.t-micro{ font-size: var(--text-12); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.t-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--primary-hover); }