/* Flo Sustainability design tokens (role A3). PLAN §7. Light theme only.
   OKLCH in CSS; the hex values in comments are for SVG attributes and the scene. */
:root {
  color-scheme: light;

  /* ---- colour (§7.1) ---------------------------------------------------- */
  --paper: oklch(99.3% 0.003 85);           /* #FEFDFA page ground: Flo warm white */
  --paper-2: oklch(96% 0.009 80);           /* #F5F1EB Flo cream: data chapters, colophon */
  --paper-3: oklch(92.8% 0.01 80);          /* #EBE7E0 plate fills */
  --rule: oklch(87% 0.01 80);               /* #D8D4CD hairlines (decorative) */
  --ink: oklch(20.5% 0.01 90);               /* #191712 text */
  --ink-2: oklch(33% 0.01 90);               /* #373530 strong secondary */
  --ink-soft: oklch(43% 0.01 90);            /* #52504A secondary text, chips */
  --ink-faint: oklch(53% 0.009 90);          /* #6E6C66 meta, credits (never on paper-3) */
  --control-edge: oklch(62% 0.008 90);       /* #888681 input borders */
  --forest: oklch(39% 0.072 155);           /* #205034 the one accent: action + living carbon */
  --forest-press: oklch(33% 0.066 155);     /* #133F26 hover, press */
  --forest-tint: oklch(93% 0.025 150);      /* #DDEDDF selection, range band */
  --forest-on-dark: oklch(80% 0.085 150);   /* #96CEA1 links and focus on dark grounds */
  --ink-ground: oklch(19% 0.008 90);         /* #151410 ch. 11 and footer */
  --paper-on-dark-soft: oklch(80% 0.008 90); /* #C0BEB8 secondary text on dark grounds */
  --rule-on-dark: oklch(99.3% 0.003 85 / 0.16);
  --viz-forest-2: oklch(62% 0.06 150);      /* #6C9173 secondary data marks (non-text) */

  /* ---- type (§7.2) ------------------------------------------------------ */
  --font-display: "Poppins", "Lato", system-ui, sans-serif;
  --font-text: "Lato", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;

  --t-display: clamp(2.25rem, 1.35rem + 3.2vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.1vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-figure: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --t-statement: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --t-lede: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-caption: 0.9375rem;
  --t-note: 0.875rem;
  --t-ui: 0.875rem;
  --t-label: 0.75rem;
  --t-folio: 0.75rem;
  --measure: 64ch;

  /* ---- space, grid, shape (§7.3) ---------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;   --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;    --s-9: 6rem;    --s-10: 8rem;  --s-11: 12rem;
  --pad-top: clamp(5rem, 3.5rem + 7vw, 10rem);
  --pad-bottom: clamp(4rem, 3rem + 5vw, 8rem);
  --pad-after-pin: var(--s-7);
  --maxw: 84rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 4rem);
  --col-gap: clamp(1rem, 2vw, 2rem);
  --head-h: 56px;
  --r: 2px;
  --e1: 0 1px 2px oklch(20% 0.01 90 / 0.10), 0 12px 32px -12px oklch(20% 0.01 90 / 0.18);

  /* ---- motion (§7.4) ---------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quiet: cubic-bezier(0.65, 0, 0.35, 1);
  --d-press: 120ms;
  --d-hover: 160ms;
  --d-state: 240ms;
  --d-reveal: 620ms;

  /* ---- scroll-craft engine theme (§12.3) -------------------------------- */
  --sc-canvas: var(--paper);
  --sc-surface: var(--paper-2);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--forest);
  --sc-accent-ink: var(--paper);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-text);
  --sc-font-mono: var(--font-ui);
  --sc-r-sm: var(--r);
  --sc-r-md: var(--r);
  --sc-r-lg: var(--r);
  --sc-r-pill: var(--r);
  --sc-gutter: var(--gutter);
  --sc-maxw: var(--maxw);
  --sc-measure: var(--measure);
  --sc-ease-out: var(--ease-out);
  --sc-shadow-color: 45 10% 8%;
}

@media (max-width: 860px) {
  :root { --head-h: 48px; }
}