/* ============================================================
   GET COMCHECK — DESIGN TOKENS (v1, DRAFT — pending Jamil approval)
   Source of truth: getcomcheck_web_recipe.txt
     Same "Certificate" layout system as getrescheck — ONLY colors change.
   Token NAMES are kept identical to the getrescheck theme (so theme.css is
   shared/structural), but VALUES are the COMcheck blues + green PASSES band.
   Hex sampled/confirmed from logo-comcheck-wide.png + COMcheck reference.
   Mapping (recipe): green-primary->blue-primary, green-accent->blue-accent,
   green-pale->blue-pale, pass-yellow->pass-green.
   ============================================================ */
:root{
  /* ---- Brand color (COMcheck blues) ---- */
  --green-primary:#1F6FB0;   /* [blue-primary] headings, section rules, price, primary CTA, header/footer rules */
  --green-hover:  #155888;   /* [blue-hover] link / button hover */
  --green-accent: #2E86C8;   /* [blue-accent] step numbers, small highlights */
  --green-pale:   #EDF4FA;   /* [blue-pale] pricing panel bg, footer bg */
  --slate-blue:   #2F5F80;   /* [navy] shield outline in checkmark, phone number text */
  --red-check:    #E23131;   /* checkmark stroke (COMcheck logo also uses a red check) */
  --pass-yellow:  #CDE8C4;   /* [pass-green] "Compliance: PASSES" band -> GREEN success band */

  /* ---- Ink & neutrals (unchanged) ---- */
  --ink:          #202824;
  --ink-soft:     #46524B;
  --ink-mute:     #6C7670;
  --rule:         #D8DCD6;
  --rule-strong:  #C9CFC7;
  --paper:        #FFFFFF;
  --paper-2:      #FDFDFB;
  --canvas:       #E3E7EA;   /* outside-the-page backdrop (desktop only) */

  /* ---- Typography (unchanged) ---- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --h1-size:46px;   --h1-size-m:29px; --h1-lh:1.12;  --h1-ls:-0.5px;
  --h2-size:24px;   --h2-size-m:19px; --h2-lh:1.2;
  --body-size:16.5px; --body-lh:1.6;
  --eyebrow-size:12.5px; --eyebrow-ls:2px;
  --mono-label-ls:1.5px;

  /* ---- Layout (unchanged) ---- */
  --page-max:1180px;
  --radius:3px;
  --rule-thin:1px;
  --rule-section:2px;
  --rule-band:3px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --shadow-card:0 1px 2px rgba(32,40,36,.06), 0 8px 24px rgba(32,40,36,.05);
}