/* SOMZ Consultants: design tokens.
   Palette taken from the SOMZ logo (green · purple · teal · gray), used on light surfaces.
   Strictly light; no dark-mode overrides anywhere. */
:root {
  color-scheme: light;

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4:      1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --tracking-caps: 0.12em;

  /* Logo colours (fills, rules, progress bars) */
  --brand-green:  #3B9E3D;
  --brand-purple: #7E007E;
  --brand-teal:   #007F7E;
  --brand-gray:   #666666;

  /* Text-safe shades (≥ 4.5:1 on white and on their washes) */
  --green-ink:    #2B7A2D;
  --purple-ink:   #7E007E;
  --teal-ink:     #006D6C;

  /* Light washes */
  --green-wash:   #EDF6ED;
  --purple-wash:  #F6EDF6;
  --teal-wash:    #E7F3F3;
  --gray-wash:    #F3F4F3;

  /* Surfaces */
  --paper:        #FFFFFF;
  --paper-warm:   #F6F8F5;   /* alternating sections (green-gray tint) */
  --paper-cool:   #F1F7F7;   /* data panels (teal tint) */
  --line:         #E2E5E1;
  --line-strong:  #C6CBC5;

  /* Ink */
  --ink:          #1F2427;
  --ink-2:        #3A4146;
  --ink-3:        #666666;   /* logo gray: 5.7:1 on white */

  /* Roles */
  --accent:       var(--teal-ink);   /* eyebrows, links, active states */
  --accent-hover: #005453;
  --accent-wash:  var(--teal-wash);
  --primary:      var(--brand-purple); /* primary buttons */
  --primary-hover:#630063;
  --signal:       var(--brand-purple); /* awards / milestones */
  --signal-wash:  var(--purple-wash);
  --success:      var(--brand-green);

  /* Functional */
  --focus:        #1F6FEB;
  --error:        #B42318;
  --error-wash:   #FEF3F2;

  /* Four-colour logo stripe */
  --brand-stripe: linear-gradient(90deg, var(--brand-green) 0 25%, var(--brand-purple) 25% 50%, var(--brand-teal) 50% 75%, var(--brand-gray) 75% 100%);

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* Layout */
  --section-y: clamp(56px, 6vw + 24px, 112px);
  --container: 1200px;
  --gutter: 16px;

  /* Shape: smooth rounded corners (adjustable in the admin panel → Design) */
  --radius-xs: 6px;    /* badges, small chips */
  --radius-sm: 10px;   /* buttons, inputs, small boxes */
  --radius-md: 16px;   /* cards, panels */
  --radius-lg: 24px;   /* large feature blocks */
  --radius-pill: 999px;

  /* Depth */
  --shadow-none: none;
  --shadow-lift: 0 1px 0 var(--line), 0 10px 28px -18px rgba(31, 36, 39, .25);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 200ms;
  --dur-slow: 420ms;

  --header-h: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}