/* ProAgriMedia 2026 Preference List — design tokens.

   Brand values come from ProAgriMedia CI 2025 (CONTRACT.md §Brand) and from the logo files
   themselves. Navy is the exact fill of `proagrimedia-logo-reversed-navy.png` (#1e365b, one
   step off the CI's #1c365c) so the trimmed reversed logo sits on navy surfaces with no
   visible box edge. Tints only — the CI provides no shades.

   checklist.css and print.css read only the semantic layer below the primitives. */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root {
  /* ---- primitives */
  --brand-navy: #1e365b;
  --brand-red: #f03340;
  --brand-black: #212421;
  --brand-yellow: #ffbf40;
  --white: #ffffff;

  --navy-90: #2c4670;
  --navy-10: #e9edf3;
  --navy-05: #f3f5f9;
  --red-10: #fdebec;
  --red-60: #d11f2c;    /* red text on white: 5.0:1, the brand red itself is 3.9:1 */
  --grey-60: #5a6270;   /* 6.2:1 on white */
  --grey-30: #c9cfd8;
  --grey-20: #dde2e9;
  --grey-10: #eceff3;

  /* ---- semantic */
  --page-bg: #eef1f5;
  --paper: var(--white);
  --ink: var(--brand-black);
  --ink-muted: var(--grey-60);
  --heading: var(--brand-navy);
  --rule: var(--grey-20);
  --rule-strong: var(--grey-30);
  --surface-quiet: var(--navy-05);

  --accent: var(--brand-red);
  --accent-text: var(--red-60);
  --accent-tint: var(--red-10);
  --highlight: var(--brand-yellow);

  --band-bg: var(--brand-navy);
  --band-bg-raised: var(--navy-90);
  --band-fg: var(--white);
  --band-fg-muted: #c3cedd;     /* 8.3:1 on navy */
  --band-gradient: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-navy) 100%);

  --control-border: #8a93a1;    /* 3.2:1 on white — the non-text 3:1 floor for a box edge */
  --control-on: var(--brand-red);
  --focus-ring: var(--brand-navy);

  --check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --check-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23d11f2c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%235a6270' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6l3.4 3.4' stroke='%235a6270' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ---- type */
  --font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", "Segoe UI", Arial, sans-serif;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.625rem;   /* 26 */
  --fs-2xl: 2.5rem;    /* 40 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- space (8pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --sheet-width: 1120px;
  --label-col: 232px;
  --toolbar-h: 60px;

  --shadow-sheet: 0 1px 2px rgba(30, 54, 91, 0.06), 0 8px 32px rgba(30, 54, 91, 0.08);
  --ease: 140ms ease;
}