:root {
  --color-primary: #21557A;
  --color-primary-hover: #1B4766;
  --color-primary-light: #4C84AC;
  --color-primary-soft: #EAF2F8;
  --color-on-primary: #FFFFFF;

  --color-secondary: #00D4FF;
  --color-secondary-end: #1AA0FF;
  --color-secondary-soft: #E0F8FF;
  --color-secondary-strong: #066A94;
  --color-on-secondary: #0F2A40;

  --gradient-brand: linear-gradient(135deg, #1B4766 0%, #21557A 48%, #4C84AC 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-end) 100%);

  --color-dark: #0F2A40;
  --color-dark-elevated: #1B4766;
  --color-dark-border: rgba(255, 255, 255, .14);
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C3D5E4;

  --color-bg: #FFFFFF;
  --color-surface: #F3F7FB;
  --color-border: #E1E9F0;
  --color-border-strong: #C9D6E2;
  --color-heading: #12324A;
  --color-text: #3A4A5C;
  --color-text-muted: #5E6E81;

  --color-agri: #267A49;
  --color-agri-soft: #E7F4EC;
  --color-agri-strong: #1F6B40;
  --color-forest: #133B2C;
  --color-forest-deep: #0B271D;
  --color-leaf: #9FD7A9;
  --color-cream: #F6F4EC;
  --color-earth: #8A6A44;

  --color-success: #177A4C;
  --color-success-soft: #E3F5EC;
  --color-warning: #A15F00;
  --color-warning-soft: #FDF1DC;
  --color-danger: #C42D37;
  --color-danger-soft: #FDECEE;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);

  --fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-lead: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .75rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(12, 28, 50, .06), 0 2px 8px rgba(12, 28, 50, .05);
  --shadow-md: 0 2px 4px rgba(12, 28, 50, .05), 0 12px 32px rgba(12, 28, 50, .10);
  --shadow-lg: 0 4px 8px rgba(15, 42, 64, .08), 0 30px 70px rgba(15, 42, 64, .28);

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-height: 72px;
  --section-space: clamp(56px, 3vw + 40px, 88px);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .2s;

  --z-header: 100;
  --z-drawer: 200;
}