/* ==========================================================================
   Willow Design — Design System / Design Tokens
   ========================================================================== */

:root {
  /* ---- Brand Colors (fixed palette per brief) ---- */
  --color-primary: #22577A;      /* deep willow-bark blue */
  --color-secondary: #38A3A5;    /* teal water */
  --color-accent: #57CC99;       /* leaf green */
  --color-accent-light: #80ED99; /* new-leaf light green */
  --color-bg: #C7F9CC;           /* pale meadow */

  /* ---- Derived neutrals (from palette only, no foreign hues) ---- */
  --color-ink: #0F2E40;          /* darkened primary — main text */
  --color-ink-soft: #345C71;     /* softened primary — secondary text */
  --color-mist: #F3FCF4;         /* near-white, tinted with bg */
  --color-white: #FFFFFF;
  --color-line: rgba(34, 87, 122, 0.12);

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(160deg, #0F2E40 0%, #17435D 45%, #1F6E63 100%);
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  --gradient-leaf: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(87, 204, 153, 0.25), transparent 45%),
                    radial-gradient(circle at 85% 15%, rgba(56, 163, 165, 0.22), transparent 45%),
                    radial-gradient(circle at 50% 100%, rgba(128, 237, 153, 0.18), transparent 50%);
  --gradient-section: linear-gradient(180deg, #F3FCF4 0%, #E4F9E6 100%);

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-dark: rgba(15, 46, 64, 0.45);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-border-dark: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(18px);

  /* ---- Typography ---- */
  --font-main: 'Vazirmatn', 'Tahoma', sans-serif;
  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-lg: 1.15rem;
  --fs-md: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;
  --lh-tight: 1.25;
  --lh-normal: 1.7;
  --lh-loose: 1.9;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8.5rem;

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 999px;
  --radius-organic: 42% 58% 65% 35% / 45% 40% 60% 55%;

  /* ---- Shadows ---- */
  --shadow-sm: 0 4px 16px rgba(15, 46, 64, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 46, 64, 0.12);
  --shadow-lg: 0 24px 60px rgba(15, 46, 64, 0.16);
  --shadow-glow: 0 0 0 1px rgba(87, 204, 153, 0.35), 0 20px 45px rgba(87, 204, 153, 0.25);
  --shadow-glass: 0 8px 32px rgba(15, 46, 64, 0.1), inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Layout ---- */
  --container: 1240px;
  --header-h: 84px;
}