/* ECOLLOGIA — Design tokens (colors, typography, spacing, radius, shadow, motion)
   Source: ECOLLOGIA Design System. Do not alter brand green values. */

:root {
  /* ---- Brand greens ---- */
  --green-900: #005B2E;
  --green-800: #0A6B3A;
  --green-700: #14803F;
  --green-600: #2D9D4B;
  --green-500: #67C23A;
  --green-400: #A4D233;
  --green-100: #DCEFDE;
  --green-50:  #F6FBF7;

  /* ---- Neutrals ---- */
  --ink-900: #0C1712;
  --ink-800: #16241D;
  --ink-700: #2C3A33;
  --ink-600: #46554D;
  --ink-500: #64766C;
  --ink-400: #8A9990;
  --ink-300: #B3C0B8;
  --ink-200: #D3DDD7;
  --ink-100: #E7EEE9;
  --ink-50:  #F4F8F5;
  --white:   #FFFFFF;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--white);
  --surface-wash: var(--green-50);
  --surface-card: var(--white);
  --surface-inverse: var(--green-900);
  --surface-inverse-2: #063321;

  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-inverse: var(--white);
  --text-on-inverse-muted: #BFE0CB;
  --text-brand: var(--green-800);
  --text-link: var(--green-800);

  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--green-600);

  --accent-primary: var(--green-800);
  --accent-primary-hover: var(--green-700);
  --accent-primary-active: var(--green-900);
  --accent-lime: var(--green-400);
  --accent-lime-hover: #B4DE4F;
  --accent-lime-active: #8FBE28;

  --focus-ring: 0 0 0 4px var(--green-100);

  /* ---- Typography ---- */
  --font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;

  --text-display-md: 700 2.25rem/1.18 var(--font-display);
  --text-display-xs: 600 1.5rem/1.3 var(--font-display);
  --text-display-sm: 600 1.75rem/1.25 var(--font-display);

  --text-body-lg: 400 1.25rem/1.6 var(--font-body);
  --text-body-md: 400 1.0625rem/1.65 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.6 var(--font-body);
  --text-body-xs: 400 0.8125rem/1.5 var(--font-body);

  --text-ui-lg: 600 1.0625rem/1.3 var(--font-ui);
  --text-ui-md: 600 0.9375rem/1.3 var(--font-ui);
  --text-ui-sm: 600 0.8125rem/1.3 var(--font-ui);
  --text-ui-label: 700 0.75rem/1.2 var(--font-ui);

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ---- Radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(12, 23, 18, 0.05);
  --shadow-sm: 0 2px 8px rgba(12, 23, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 23, 18, 0.08);
  --shadow-lg: 0 16px 48px rgba(12, 23, 18, 0.10);
  --shadow-xl: 0 24px 64px rgba(12, 23, 18, 0.14);

  /* ---- Layout ---- */
  --content-max-width: 1200px;
  --header-height: 138px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}