/* ============================================================
   Solves - Design Tokens
   One source of truth. Implementation agent: copy verbatim
   into the PHP app as a root stylesheet.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (app = dense, marketing pages may step up) */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 44px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Neutrals (green-tinted, never pure grey) ---- */
  --color-bg: #f5f7f3;            /* app + page background */
  --color-surface: #ffffff;       /* cards, table rows, panels */
  --color-surface-raised: #ffffff;/* + shadow-2 */
  --color-sunken: #eef1ea;        /* wells, sidebar, code areas */
  --color-border: #dde3d9;
  --color-border-strong: #c3ccbd;
  --color-text: #1d231f;          /* primary text - 14.9:1 on bg */
  --color-text-secondary: #45504a;
  --color-text-muted: #66726a;    /* 4.9:1 on white */
  --color-text-faint: #8b958d;    /* metadata only, never body copy */

  /* ---- Brand ---- */
  --color-primary: #15603f;        /* deep green - 6.4:1 on white */
  --color-primary-hover: #0e4a30;
  --color-primary-soft: #e3efe6;   /* tinted fills behind primary content */
  --color-primary-text: #0f4d33;   /* green used AS text on light bg */
  --color-accent: #a8430f;         /* rust - sparing: early-access, highlights */
  --color-accent-hover: #8a3409;
  --color-accent-soft: #f8e9df;

  /* ---- Semantic ---- */
  --color-success: #15703f;
  --color-success-soft: #e1f0e5;
  --color-warning: #9a6700;
  --color-warning-soft: #fdf2d4;
  --color-danger: #b42318;
  --color-danger-soft: #fde7e4;
  --color-info: #1361b0;
  --color-info-soft: #e4eef9;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #15803f;

  /* ---- Spacing scale (4px base) ---- */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Radius (8px is the maximum, per brand rules) ---- */
  --r-xs: 3px;   /* chips, badges */
  --r-sm: 5px;   /* inputs, buttons */
  --r-md: 8px;   /* cards, modals, drawers - the cap */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(29, 35, 31, 0.06);
  --shadow-2: 0 1px 3px rgba(29, 35, 31, 0.08), 0 4px 12px rgba(29, 35, 31, 0.07);
  --shadow-3: 0 4px 8px rgba(29, 35, 31, 0.08), 0 12px 32px rgba(29, 35, 31, 0.14);

  /* ---- Demo brand colours (customer-chosen, per brand) ---- */
  --brand-a: #3056d3;
  --brand-b: #b3590e;
}

/* Visible keyboard focus, everywhere, no exceptions */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}