/* ==========================================================================
   tokens.css  -  Design tokens (SHARED KIT)
   Every colour, size and radius used on the site lives here. Pages and
   components only use var(--...) values, never hard-coded colours.
   ========================================================================== */

:root {
  /* Typography: system fonts, so nothing is downloaded and the CSP stays strict */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.1rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 650;
  --lh: 1.5;

  /* Spacing scale (4px steps) */
  --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;

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(20 50 40 / 0.05), 0 10px 28px rgb(20 50 40 / 0.05);
  --shadow-pop: 0 12px 32px rgb(20 50 40 / 0.18);

  /* Surfaces and text */
  --c-bg: #f2f7f3;
  --c-surface: #ffffff;
  --c-surface-soft: #f6faf7;
  --c-text: #15302a;
  --c-text-muted: #5a6d65;
  --c-border: #dfe8e1;

  /* Brand */
  --c-primary: #2b7a4b;
  --c-primary-hover: #226240;
  --c-primary-soft: #e3f3e8;
  --c-primary-ink: #14532d;
  --c-forest: #17332e;      /* dark panels */
  --c-forest-2: #21463f;
  --c-accent: #e8912d;      /* main call-to-action (orange) */
  --c-accent-hover: #f0a04a;
  --c-focus: #0b5cad;

  /* Feedback / status tones: background + text + dot */
  --tone-success-bg: #dff3e6;  --tone-success-fg: #14532d;  --tone-success-dot: #2b9a5c;
  --tone-warning-bg: #fdf0d2;  --tone-warning-fg: #6b3f00;  --tone-warning-dot: #d98a00;
  --tone-danger-bg:  #fde6e3;  --tone-danger-fg:  #8a1c10;  --tone-danger-dot:  #d6402e;
  --tone-info-bg:    #e1edfa;  --tone-info-fg:    #17477a;  --tone-info-dot:    #3a7fd0;
  --tone-neutral-bg: #eceeec;  --tone-neutral-fg: #46524b;  --tone-neutral-dot: #8a958f;

  /* Layout */
  --container: 1320px;
  --topbar-height: 68px;
  --aside-width: 340px;
}