/* Horticoop Invest: design tokens for the build (DS-04). The only place colour, type, space, shape and motion values are defined.
   Reduced to design-system.md §2: the toggles' palettes, the old ratios and the story tokens are gone (§9). The reference home keeps its own ../tokens.css.
   Contrast (WCAG 2.2) is checked for every text/ground pair when it is defined; the ratios are in design-system.md §2.1. */
:root {
  /* Brand (horticoop-brand-rules.pdf) */
  --blue-900: #022169;   /* PMS 280: the one navy section, headings on light, scrim base */
  --blue-700: #004289;   /* brand blue (FC): links, focus, icons on light */
  --green-600: #65B32E;  /* brand green (FC): button fill, navy text on it 5.7:1 */
  --green-500: #77BC1F;  /* PMS 368: accent on dark only, 6.4:1 on navy */

  /* Derived */
  --blue-300: #9AA8C8;   /* muted text on navy, 6.2:1 */
  --blue-100: #DCE6F2;   /* body text on navy and on scrims, 11.9:1 on navy */
  --green-text: #3A7512; /* the only green as text on light: 5.6:1 on white */
  --red-700: #A82B24;    /* form errors: 6.9:1 on white, 6.1:1 on cream-50 */
  --ink: #0F1B2A; --grey-700: #3B4756; --grey-500: #56626F;
  --cream-300: #CDBFA4;  /* hairlines, dashed outlines (not under text, not as a control outline) */
  --cream-200: #E4D9C4;  /* borders */
  --cream-100: #EFE7D7;  /* subtle surface: footer, placeholders */
  --cream-50: #F6F0E4;   /* page ground */
  --white: #FFFFFF;
  --line-on-dark: rgba(255, 255, 255, .24);        /* hairlines on navy and over photos */
  --line-on-dark-strong: rgba(255, 255, 255, .5);  /* control outlines on dark, 3:1 */
  --fill-on-dark: rgba(255, 255, 255, .06);        /* placeholder fill on navy */
  --scrim: 2, 33, 105;   /* navy as r,g,b for scrim gradients */
  --scrim-hold: .82;     /* the least scrim behind text on a photo */

  /* Roles */
  --bg-page: var(--cream-50); --bg-subtle: var(--cream-100); --bg-card: var(--white); --bg-inverse: var(--blue-900);
  --text: var(--ink); --text-muted: var(--grey-700); --text-on-dark: var(--white);
  --link: var(--blue-700); --accent: var(--green-600); --accent-on-dark: var(--green-500);
  --border: var(--cream-200); --focus: var(--blue-700);
  --field-border: var(--grey-500); /* form controls: 6.2:1 on white, 1.4.11 */
  --error: var(--red-700);

  /* Type: Figtree headings and labels, Mulish body (working decision, D-35) */
  --font-head: "Figtree", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --fs-body: 1.0625rem; --fs-lead: 1.25rem; --lh-body: 1.6;
  --measure: 68ch;       /* long-form text column */

  /* Space, layout, shape */
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 80px; --space-8: 120px;
  --cap: 1440px;                          /* content column cap */
  --gutter: clamp(20px, 5vw, 80px);       /* page gutter */
  --sec-pad: clamp(96px, 12vw, 176px);    /* block padding between sections */
  --sec-pad-band: clamp(72px, 8vw, 128px);/* the navy band, the CTA band */
  --head-gap: clamp(48px, 6vw, 80px);     /* section heading to content */
  --radius: 0; --radius-lg: 0;            /* square, D-48 */
  --radius-pill: 999px;                   /* buttons, pills, menu button only */
  --shadow: 0 1px 2px rgba(2, 33, 105, .08), 0 4px 12px rgba(2, 33, 105, .08); /* layers over the page only: open menu panels, the cookie panel */
  --header-h: 80px;
  --logo-height: 56px; --logo-height-small: 40px;
  --icon: 32px; --icon-sm: 28px;

  /* Imagery: one ratio per role */
  --ratio-still: 4 / 3;   /* value-chain still */
  --ratio-tile: 1 / 1;    /* portfolio tile */
  --ratio-card: 4 / 3;    /* portfolio card */
  --ratio-news: 16 / 9;   /* news card and article */
  --ratio-person: 3 / 2;  /* team photo, landscape (DES-07) */
  --ratio-map: 1000 / 432; /* world and network map: the Equal Earth frame, 84° N to 56° S */

  /* Motion: only under the .fx-on gate (motion allowed and wider than 800px) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-card: cubic-bezier(.25, .8, .25, 1);
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
  --dur-reveal: 800ms; --stagger: 90ms; --dur-count: 1200ms;
  --dur-card-in: 400ms; --dur-card-out: 250ms; --dur-swap: 200ms;
  --dur-hero: 1300ms; --dur-hero-fade: 1000ms; --delay-hero-fade: 500ms; --stagger-hero: 120ms;
}