/* ============================================================
   AgroRise — Design Tokens
   Light + Dark theme system, agriculture-inspired FinTech palette
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand-primary: #2D6A4F;
  --brand-primary-hover: #1B4332;
  --brand-accent: #D4A373;
  --brand-secondary: #3A6EA5;

  /* ---------- Light Theme ---------- */
  --bg-app: #FCFBF8;
  --bg-card: #FFFFFF;
  --bg-surface: #F1EFE8;
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --border: #E8E4DA;
  --border-strong: #D8D2C4;

  --text-primary: #14231A;
  --text-secondary: #4B5A4C;
  --text-disabled: #8A9389;

  --success: #2D6A4F;
  --success-bg: rgba(45, 106, 79, 0.12);
  --danger: #A63D40;
  --danger-bg: rgba(166, 61, 64, 0.12);
  --warning: #B08968;
  --warning-bg: rgba(176, 137, 104, 0.16);
  --info: #3A6EA5;
  --info-bg: rgba(58, 110, 165, 0.12);

  /* Semantic aliases (light) */
  --primary: #2D6A4F;
  --primary-hover: #1B4332;
  --primary-contrast: #FFFFFF;
  --primary-soft: rgba(45, 106, 79, 0.1);

  --gradient-brand: linear-gradient(135deg, #2D6A4F 0%, #3A8F66 55%, #52B788 100%);
  --gradient-hero: radial-gradient(1200px 600px at 85% -10%, rgba(212, 163, 115, 0.22), transparent 60%),
                   radial-gradient(900px 520px at 8% 110%, rgba(45, 106, 79, 0.18), transparent 55%),
                   linear-gradient(180deg, #FCFBF8 0%, #F4F1E8 100%);

  /* ---------- Radii ---------- */
  --radius-btn: 12px;
  --radius-card: 18px;
  --radius-input: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px rgba(20, 35, 26, 0.06);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 0 4px rgba(45, 106, 79, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Typography ---------- */
  --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 68px;

  /* ---------- Motion ---------- */
  --transition-fast: 150ms;
  --transition: 300ms;
  --transition-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-overlay: 150;
  --z-modal: 200;
  --z-toast: 300;

  /* ---------- Misc ---------- */
  --skeleton-base: var(--bg-surface);
  --skeleton-shine: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Dark Theme
   ============================================================ */
[data-theme="dark"] {
  --bg-app: #0E1712;
  --bg-card: #16231C;
  --bg-surface: #1E2E25;
  --bg-elevated: #1E2E25;
  --bg-input: #1E2E25;
  --border: #2A3B31;
  --border-strong: #3A4D40;

  --text-primary: #F1EFE8;
  --text-secondary: #B4C0B4;
  --text-disabled: #74857A;

  --success: #52B788;
  --success-bg: rgba(82, 183, 136, 0.14);
  --danger: #E07A5F;
  --danger-bg: rgba(224, 122, 95, 0.14);
  --warning: #D4A373;
  --warning-bg: rgba(212, 163, 115, 0.16);
  --info: #74A6D8;
  --info-bg: rgba(116, 166, 216, 0.14);

  --primary: #52B788;
  --primary-hover: #74C69D;
  --primary-contrast: #0E1712;
  --primary-soft: rgba(82, 183, 136, 0.14);

  --gradient-brand: linear-gradient(135deg, #2D6A4F 0%, #40916C 55%, #52B788 100%);
  --gradient-hero: radial-gradient(1200px 600px at 85% -10%, rgba(212, 163, 115, 0.14), transparent 60%),
                   radial-gradient(900px 520px at 8% 110%, rgba(82, 183, 136, 0.12), transparent 55%),
                   linear-gradient(180deg, #0E1712 0%, #122019 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --skeleton-base: #1E2E25;
  --skeleton-shine: rgba(255, 255, 255, 0.06);
}

/* Theme transition — applied on html to smooth the whole switch */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color var(--transition) ease,
              color var(--transition) ease,
              border-color var(--transition) ease,
              box-shadow var(--transition) ease !important;
}