/*
  EcoWorld design tokens — refined eco-modern palette.
  Every page should style itself from these custom properties rather
  than hardcoding colors/spacing, so the whole app reads as one product.

  Variables only, deliberately: this file is safe to load on any page
  (including ones not yet migrated to the design system) because a
  custom-property definition has zero visual effect on its own. Global
  resets/defaults that DO affect unmigrated pages live in reset.css,
  which only base.html loads for now.
*/

:root {
    /* Color */
    --forest-900: #0b2b20;
    --forest-700: #14532d;
    --forest-500: #1f7a4d;
    --lime-500: #84cc16;
    --lime-300: #bef264;
    --sand-50: #faf7f0;
    --sand-100: #f2ecdd;
    --ink-900: #16211c;
    --ink-600: #4b5d54;
    --ink-400: #7c8d84;
    --white: #ffffff;
    --border: #e3ddce;

    --success: var(--forest-500);
    --danger: #c0392b;
    --warning: #b8860b;

    /* Typography */
    --font-heading: "Poppins", "Inter", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;

    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
    --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --text-2xl: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(11, 43, 32, 0.08);
    --shadow-md: 0 6px 20px rgba(11, 43, 32, 0.10);
    --shadow-lg: 0 16px 40px rgba(11, 43, 32, 0.16);

    /* Layout */
    --navbar-height: 64px;
    --content-max-width: 1200px;
}