/* ============================================================
   GET MANUAL JSD — DESIGN TOKENS (v1, DRAFT — pending Jamil approval)
   Source of truth: getmanualjsd_web_recipe.txt
     Same "Certificate" layout system as getrescheck — ONLY colors change.
   Token NAMES kept identical to the getrescheck theme (so theme.css is
   shared/structural); VALUES are the Wrightsoft slate-green + logo navy/orange.
   Hex sampled/confirmed from logo-manualjsd.png + Wrightsoft reference.
   Mapping (recipe): green-primary->slate-primary, green-hover->slate-hover,
   green-accent->orange-accent, red-check->orange-accent (checks are ORANGE),
   green-pale->slate-pale, slate-blue->navy, pass-yellow->band-pale.
   ============================================================ */
:root{
  /* ---- Brand color (Wrightsoft slate-green + logo navy/orange) ---- */
  --green-primary:#3D5A4E;   /* [slate-primary] headings, section rules, price, primary CTA, header/footer rules */
  --green-hover:  #2A4237;   /* [slate-hover] link / button hover */
  --green-accent: #F0731F;   /* [orange-accent] step numbers, small highlights (brand accent) */
  --green-pale:   #EEF1EE;   /* [slate-pale] pricing panel bg, footer bg */
  --slate-blue:   #205070;   /* [navy] shield outline in checkmark, phone number text */
  --red-check:    #F0731F;   /* [orange-accent] checkmark stroke — ORANGE here, not red */
  --pass-yellow:  #DDE7DE;   /* [band-pale] report "design-load" callout band */

  /* ---- Ink & neutrals (unchanged) ---- */
  --ink:          #202824;
  --ink-soft:     #46524B;
  --ink-mute:     #6C7670;
  --rule:         #D8DCD6;
  --rule-strong:  #C9CFC7;
  --paper:        #FFFFFF;
  --paper-2:      #FDFDFB;
  --canvas:       #E7E8E4;   /* 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);
}