/* ==========================================================================
   AgroTech – tokens de design
   Uma única fonte de verdade para cor, tipografia, espaço, raio e movimento.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Tipografia */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: clamp(1.5rem, 1.32rem + 0.7vw, 1.875rem);
  --text-3xl: clamp(1.8rem, 1.45rem + 1.4vw, 2.5rem);
  --text-4xl: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);

  --leading-tight: 1.15;
  --leading-snug: 1.32;
  --leading-normal: 1.6;

  /* Espaço – base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Raio */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.375rem;
  --r-2xl: 1.75rem;
  --r-pill: 999px;

  /* Paleta de marca */
  --forest: #10251f;
  --navy: #15263b;
  --emerald: #147d59;
  --emerald-700: #0f6347;
  --emerald-300: #6bc9a5;
  --lime: #c7f36b;
  --lime-soft: #e5fbc2;
  --ivory: #f7f8f2;
  --line: #e2e8e4;
  --amber: #e7a83e;
  --coral: #e45d5d;
  --blue: #4c8ddf;

  /* Superfícies e texto (tema claro) */
  --bg: var(--ivory);
  --bg-tint: #eef2ea;
  --surface: #ffffff;
  --surface-2: #f3f6f1;
  --surface-3: #e9efea;
  --text: #14231d;
  --text-soft: #42564d;
  --text-muted: #546a60;
  --border: var(--line);
  --border-strong: #cdd8d1;
  --accent: var(--emerald);
  --accent-hover: var(--emerald-700);
  --accent-ink: #ffffff;
  --accent-soft: #e4f5ec;
  --highlight: var(--lime);
  --highlight-ink: var(--forest);
  --focus: #2f9f74;
  --danger: #a93232;
  --danger-soft: #fceaea;
  --warning: #7d5208;
  --warning-soft: #fdf3e1;
  --info: #245d9f;
  --info-soft: #eaf2fc;
  --success: var(--emerald-700);
  --success-soft: #e4f5ec;

  /* Sidebar (sempre escura, identidade da marca) */
  --sidebar-bg: #0e211c;
  --sidebar-bg-2: #10271f;
  --sidebar-text: #eef5ef;
  --sidebar-soft: #b9c9c0;
  --sidebar-muted: #8ba096;
  --sidebar-line: rgba(255, 255, 255, 0.09);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-current: rgba(199, 243, 107, 0.14);

  /* Sombras */
  --shadow-1: 0 1px 2px rgba(16, 37, 31, 0.05);
  --shadow-2: 0 8px 24px -12px rgba(16, 37, 31, 0.28);
  --shadow-3: 0 24px 60px -24px rgba(16, 37, 31, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Movimento */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --sidebar-w: 17.5rem;
  --topbar-h: 4.25rem;
  --page-max: 92rem;
  --page-pad: clamp(1rem, 2.4vw, 2.5rem);
  --bottom-nav-h: 4rem;

  /* Camadas */
  --z-scrim: 40;
  --z-sidebar: 50;
  --z-topbar: 30;
  --z-dropdown: 60;
  --z-palette: 80;
  --z-toast: 90;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0a1512;
  --bg-tint: #0d1c17;
  --surface: #101f1a;
  --surface-2: #152822;
  --surface-3: #1a302a;
  --text: #edf4ef;
  --text-soft: #b9cbc2;
  --text-muted: #91a79d;
  --border: #21362e;
  --border-strong: #2e463c;
  --accent: #35a97b;
  --accent-hover: #47bd8c;
  --accent-ink: #08130f;
  --accent-soft: rgba(53, 169, 123, 0.14);
  --highlight: var(--lime);
  --highlight-ink: #0e211c;
  --focus: #c7f36b;
  --danger: #f08a8a;
  --danger-soft: rgba(228, 93, 93, 0.14);
  --warning: #eac27a;
  --warning-soft: rgba(231, 168, 62, 0.14);
  --info: #86b6ea;
  --info-soft: rgba(76, 141, 223, 0.16);
  --success: #5ecfa4;
  --success-soft: rgba(53, 169, 123, 0.16);

  --sidebar-bg: #08130f;
  --sidebar-bg-2: #0b1a15;
  --sidebar-text: #eef5ef;
  --sidebar-soft: #a9bdb3;
  --sidebar-muted: #7e948a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (min-width: 64rem) {
  :root {
    --sidebar-w: 17.5rem;
  }
}