/* ============================================================
   ECOSANKALP — DESIGN TOKENS (the single source of brand values)
   ============================================================
   PLAIN ENGLISH: This file is the brand's "control panel". Every
   colour, font, spacing size, corner-roundness and animation speed
   used across BOTH the public website and the admin tool is defined
   here once, as a named variable (a "token"). Change a value here
   and it updates everywhere that token is used — so this is the
   safest place to tweak the look, and the riskiest place to guess.

   HOW IT FITS: loaded first by every page. Other stylesheets never
   hard-code brand colours; they reference these names, e.g.
   `color: var(--color-forest)`. `var(--name)` just means "use the
   value of the token called --name".

   SECTIONS: colour system → typography → spacing → shape/depth →
   motion → compatibility aliases (older names mapped to new ones).
   ============================================================ */
:root {
  /* ---- Colour system (Botanical Precision palette) ----
     Names describe intent (canvas = page background, forest = deep
     brand green, ink = text, etc.), so code reads like English. */
  /* Botanical Precision color system */
  --color-canvas: #f5f2e8;
  --color-canvas-soft: #ebe8dc;
  --color-surface: #fffdf6;
  --color-forest: #123b2a;
  --color-forest-deep: #08271b;
  --color-leaf: #2f7d4b;
  --color-leaf-bright: #79c267;
  --color-citrus: #d8e85b;
  --color-clay: #c86f45;
  --color-ink: #10231a;
  --color-ink-soft: #42584d;
  --color-muted: #607268;
  --color-rule: #ccd2c7;
  --color-on-dark: #f8f6ed;
  --color-on-dark-soft: #bdcbbf;
  --color-focus: #b7d93d;

  /* ---- Typography (three typefaces + fluid text sizes) ----
     display = headlines (Fraunces), body = paragraphs (Archivo),
     mono = small labels/eyebrows (IBM Plex Mono). */
  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: Archivo, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  /* clamp(MIN, PREFERRED, MAX): text size scales fluidly with the
     viewport (the "vw" middle value) but never smaller than MIN or
     larger than MAX. This is how headings shrink gracefully on phones. */
  --text-hero: clamp(3.35rem, 8vw, 7.4rem);
  --text-section: clamp(2.35rem, 5vw, 4.8rem);
  --text-card: clamp(1.5rem, 2.5vw, 2.25rem);
  --text-lead: clamp(1.06rem, 1.6vw, 1.3rem);
  --text-body: 1rem;
  --text-support: 0.875rem;
  --text-caption: 0.75rem;

  /* ---- Spacing scale ----
     A consistent ladder of gaps/margins built on a 4px root (0.25rem).
     Using these instead of random numbers keeps rhythm even everywhere. */
  /* Four-pixel-rooted spacing scale */
  --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: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;

  /* ---- Shape and depth (corner rounding + drop shadows) ----
     --radius-organic uses four different corner values to create a
     deliberately lopsided, leaf-like shape (used on the hero panel). */
  /* Shape and depth */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-organic: 3.5rem 1.5rem 3.5rem 1.5rem;
  --shadow-float: 0 24px 80px rgb(8 39 27 / .12);
  --shadow-card: 0 16px 50px rgb(8 39 27 / .08);
  --border-hairline: 1px solid var(--color-rule);

  /* ---- Motion (easing curves + durations for animations) ----
     Easings are the "personality" of movement. cubic-bezier(...) is a
     custom acceleration curve; --ease-spring uses linear(...) to fake a
     bouncy spring. Durations are shared so animations feel consistent. */
  /* Motion */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-enter: cubic-bezier(.4,0,1,1);
  --ease-standard: cubic-bezier(.65,0,.35,1);
  --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85%, 1);
  --duration-fast: 180ms;
  --duration-medium: 320ms;
  --duration-slow: 680ms;

  /* ---- Compatibility aliases ----
     Older stylesheets used different token names; these map the old
     names onto the new palette above so nothing breaks. Prefer the
     new names for anything you add. */
  /* Compatibility aliases for the current stylesheet. */
  --color-paper: var(--color-canvas);
  --color-paper-2: var(--color-canvas-soft);
  --color-ink-2: var(--color-ink-soft);
  --color-accent: var(--color-leaf);
  --color-accent-bright: var(--color-leaf-bright);
  --color-accent-ink: var(--color-on-dark);
  --color-dark: var(--color-forest-deep);
  --color-dark-ink: var(--color-on-dark);
  --text-display: var(--text-hero);
  --text-display-s: var(--text-section);
  --text-2xl: var(--text-card);
  --text-lg: var(--text-lead);
  --text-md: var(--text-body);
  --text-sm: var(--text-support);
  --text-xs: var(--text-caption);
  --space-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-7);
  --space-2xl: var(--space-8);
  --space-3xl: var(--space-9);
  --ease-in: var(--ease-enter);
  --ease-in-out: var(--ease-standard);
  --dur-fast: var(--duration-fast);
  --dur-med: var(--duration-medium);
  --dur-slow: var(--duration-slow);
  --rule-hairline: var(--border-hairline);
}