/* IMPAK design tokens.
   Every colour, type size and space on the site comes from here (brief §5.1, §5.2).
   Draft palette by Claude; swap values here if the intern's IMPAK palette arrives. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-vf.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* IMPAK APP PALETTE VARIANT (impak-landing-app-palette).
     Colours from the IMPAK web app's "rainforest" theme (docs/IMPAK-APP-PALETTE-2026-11.md,
     app globals.css .impak-theme). Same token names as the light site, so every component
     re-themes itself. Leaf green = actions; gold = highlights; three surface layers.
     Values marked "derived" are not in the app and are blended from app values. */

  /* ── Canopy: hero band, stat band, footer = the app's darkest base ── */
  --impak-bg-deep: #0A1F14;      /* app: darkest base (login, full-screen pages) */
  --impak-bg: #0A1F14;           /* hero band, same base */
  --impak-bg-raised: #10291C;    /* app: page background */
  --impak-surface: #173A28;      /* app: card / panel ("canopy") */
  --impak-line: #273C30;         /* app border rgba(214 240 220 / .14) on the base, as solid */
  --impak-text: #E4EFE6;         /* app: body text */
  --impak-text-muted: #B3CDB9;   /* app: muted text */

  /* ── Accent: the app's leaf green (buttons, focus, checks, released money) ── */
  --impak-accent: #7BDC6F;       /* app --primary */
  --impak-accent-hover: #8FE684; /* app primary hover */
  --impak-accent-ink: #0C2416;   /* app --primary-foreground */
  --impak-accent-deep: #9BE38F;  /* app light-green text accent: labels, icons, underlines */
  --impak-link: #A8EC9C;         /* app link text on dark */

  /* ── Highlight: the app's gold (icon discs, highlighted figures, map pins, satellite alerts) ── */
  --impak-highlight: #F2C14E;    /* app --impak-gold */
  --impak-highlight-ink: #0C2416;

  --impak-signal: #7CC6B5;       /* data only (satellite boundaries), unchanged */

  /* ── Body: three app layers ── */
  --impak-paper: #10291C;        /* app --background, "deep forest" */
  --impak-paper-tint: #143222;   /* alternate band (derived: halfway page → card) */
  --impak-card: #173A28;         /* app --card, "canopy" */
  --impak-raised: #204D35;       /* app --secondary: hover, chips, selected */
  --impak-paper-line: #325341;   /* app border on a card, as solid */
  --impak-ink: #E4EFE6;          /* app body text */
  --impak-heading: #FFFFFF;      /* app heading text */
  --impak-ink-muted: #B3CDB9;    /* app muted text */
  --impak-strong: #204D35;       /* secondary button = the app's raised layer */
  --impak-strong-ink: #FFFFFF;
  --impak-strong-hover: #285C40; /* derived: one step lighter */
  --impak-strong-border: #456653;/* app input border on a card, as solid */

  /* Light originals, for the few "light islands" (logo tiles, the light secondary button). */
  --light-paper: #E4EFE6;
  --light-card: #FFFFFF;
  --light-ink: #0C2416;
  --light-ink-muted: #4E5D54;
  --light-amber-ink: #9A5A0C;
  --light-forest: #163022;

  /* ── Type ── */
  /* One family, as in the IMPAK web app (web/src/app/layout.tsx: Plus Jakarta Sans for body and headings; D41).
     Roles differ by weight and size, not by face. */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);   /* headings: 700–800, tight tracking */
  --font-data: var(--font-sans);      /* amounts, hectares, record fields: always with tabular-nums */
  /* Only for the fictional "Trusted by" wordmarks, so they read as other companies' logos (D24) */
  --font-logo-serif: Georgia, "Times New Roman", serif;
  --font-logo-mono: "Courier New", ui-monospace, monospace;

  /* Fluid scale, 360px → 1440px */
  --step--2: 0.75rem;                                    /* 12  */
  --step--1: 0.875rem;                                   /* 14  */
  --step-0: 1.0625rem;                                   /* 17  body */
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18–21 lead */
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);   /* 22–30 */
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);     /* 28–44 section titles */
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 4rem);          /* 36–64 */
  --step-5: clamp(2.625rem, 1.6rem + 4.4vw, 5rem);       /* 42–80 hero */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --measure: 62ch;

  /* ── Space (4px base) ── */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --page-max: 82rem;

  /* ── Shape and depth: Restor's soft corners (D34) ── */
  --radius-s: 4px;     /* inputs, small chips */
  --radius-btn: 6px;   /* buttons */
  --radius: 8px;       /* cards, menus */
  --radius-lg: 12px;   /* large panels */
  --shadow-sheet: 0 1px 1px rgb(0 0 0 / 0.25), 0 18px 40px -12px rgb(0 0 0 / 0.55);
  --shadow-menu: 0 2px 4px rgb(4 12 8 / 0.25), 0 16px 32px -8px rgb(4 12 8 / 0.55);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;

  --nav-h: 4.5rem;
}

/* ── Light islands on the dark theme ──
   Fictional-brand logo tiles stay white (logos are drawn for a white ground), and the white
   secondary button stays white, as on Restor. Re-declaring the tokens here re-themes them in place. */
.logo,
.btn--paper {
  --impak-paper: var(--light-paper);
  --impak-card: var(--light-card);
  --impak-ink: var(--light-ink);
  --impak-ink-muted: var(--light-ink-muted);
  --impak-accent-deep: var(--light-amber-ink);
  --impak-bg-raised: var(--light-forest);
  --impak-heading: var(--light-ink);
}