/* ============================================================================
   BB Internal Form — design tokens

   Two sources, deliberately kept apart:

   1. The RESPONSIVE FRAME (grid, type scale, control height) comes from the
      Internal Form design spec — mobile-first at 390 / 640 / 1024.
   2. The BRAND (colour, radius, motion, focus) is lifted verbatim from the
      platform's /tokens.css so this app and the field app render as one
      product. Same hexes, same names — a later merge is a copy, not a
      reconciliation.

   Where the two disagree, the frame wins. There is exactly one such conflict
   and it is called out at --control-h.
   ========================================================================= */

:root{

  /* ---------- brand: colour ----------
     Lifted from the platform. The one non-negotiable rule the brand playbook
     states: --orange is DECORATIVE ONLY. It is 2.97:1 on white and can never
     carry text or fill a button. Anything orange that a user reads or taps
     uses --orange-btn (4.74:1). */
  --navy:#123a86;            /* structure, actions, selected state */
  --navy-l:#2f8fe0;          /* focus ring, active border */
  --navy-d:#0e2f6d;          /* pressed */
  --orange:#FB672C;          /* accent only — never text, never a button fill */
  --orange-btn:#bf520b;      /* the accessible orange: text + fills */
  --orange-d:#ad4a0d;        /* hover / pressed */
  --orange-pale:#fdeee2;
  --orange-br:#f2c6a4;
  --dark:#20262e;

  /* ---------- surface + text ---------- */
  --ink:#1f2733;             /* default text */
  --muted:#656b78;           /* secondary text — the floor for legible copy */
  --placeholder:#8a93a3;     /* grey: content placeholder, and nothing else */
  --line:#dce1ea;            /* hairlines, card borders */
  --line-strong:#c1cbda;     /* form-field borders ONLY — one visible step
                                darker, so fields read as fields */
  --bg:#e8ecf3;              /* app canvas */
  --card:#fff;

  /* ---------- semantic status ---------- */
  --ok:#0d7e56;              --ok-pale:#e6f5ee;
  --ok-strong:#15803d;       /* solid green fill, white text — 5.0:1 */
  --warn:#b54e0a;            --warn-pale:#fdeee2;
  --danger:#d34247;          --danger-pale:#fdecec;
  --danger-d:#b42348;
  --neutral:#5f6e84;         --neutral-pale:#eef1f6;

  /* ---------- on-dark (the header band) ---------- */
  --on-dark-ink:#ffffff;
  --on-dark-muted:rgba(255,255,255,.78);
  --on-dark-warm:#ff9166;    /* eyebrow, step pill */
  --on-dark-line:rgba(255,255,255,.16);
  --on-dark-fill:rgba(255,255,255,.12);
  --scrim-strong:rgba(8,15,30,.5);

  /* ---------- type family ----------
     System stack, no webfont. This app is used outdoors and offline; a webfont
     would simply fail to load with no signal. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---------- type scale — from the frame ---------- */
  --t-display:26px;          /* step title */
  --t-section:20px;          /* section heading */
  --t-body:17px;             /* body copy AND every input */
  --t-min:16px;              /* the floor for anything focusable — see below */
  --t-meta:13px;             /* labels, captions, helper text */
  --t-eyebrow:11px;          /* uppercase eyebrow */

  /* ---------- grid — from the frame ----------
     390–639   4 col · 12px gutter · 16px margin
     640–1023  8 col · 16px gutter · 24px margin
     1024+    12 col · 20px gutter · max 1200 content
     Live values are set per-breakpoint at the bottom of this file. */
  --grid-cols:4;
  --gutter:12px;
  --margin:16px;
  --content-max:1200px;

  /* ---------- control height — from the frame ----------
     The frame specifies 36px for inputs, selects and buttons.

     NOTE, deliberately left as one token: the Bug Busters brand playbook
     commits to touch targets >= 40px on field surfaces, and the platform's own
     controls run 44–52px. 36px is a smaller target than anything else a rep
     touches. If it proves tight in the field, change this line only — every
     control in the app derives from it. */
  --control-h:36px;
  --control-h-lg:44px;       /* primary footer action only */

  /* ---------- radius ---------- */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:10px;               /* inputs and small controls */
  --r-lg:12px;               /* section cards, plates */
  --r-xl:16px;
  --r-full:999px;

  /* ---------- spacing — 4px grid ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;

  /* ---------- elevation ---------- */
  --sh-1:0 2px 6px rgba(0,0,0,.08);
  --sh-2:0 8px 22px rgba(25,40,80,.09);
  --sh-up:0 -8px 24px rgba(16,32,64,.08);

  /* ---------- motion ---------- */
  --dur-fast:.12s;
  --dur-base:.18s;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- breakpoints ----------
   Mobile-first: the :root values above are the 390–639 band. */
@media (min-width:640px){
  :root{ --grid-cols:8;  --gutter:16px; --margin:24px; }
}
@media (min-width:1024px){
  :root{ --grid-cols:12; --gutter:20px; --margin:24px; }
}

/* ============================================================================
   Focus — the frame calls for a visible focus ring, and the platform already
   ships one. Same values, so a control behaves identically in both apps.
   :where() keeps specificity at (0,1,0) so a component can restyle the ring
   without having to fight it.
   ========================================================================= */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--navy-l);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Never remove the ring. If a component needs a different shape it overrides
   the radius, not the outline. */

/* ============================================================================
   The 16px floor.

   iOS zooms the viewport when a focused input's text is under 16px, and it
   never zooms back — the rep is left on a form scrolled sideways. The frame
   states 16px as the placeholder minimum for the same reason.

   This is declared at (1,0,0) via :where() so component rules at (1,1,x) can
   restyle a control freely but cannot shrink it below the floor.
   ========================================================================= */
:where(input, select, textarea){
  font-size:var(--t-body);
  font-family:var(--font-ui);
}
:where(input, select, textarea)::placeholder{
  font-size:var(--t-min);
  color:var(--placeholder);
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}