/* Design tokens, ported unchanged from the Astro site's src/styles/comparedrawing.css.
   Two deliberate departures from the original bundle are described below; the
   only change made for WordPress is at the foot of the file, where the font
   stacks name their families instead of reading Astro's font-provider variables.

   Original note follows.

   Design tokens from the Comparedrawing story-site bundle.
   Two deliberate departures from the original: the font stacks are re-pointed
   at the families Astro self-hosts, and the bundle's duplicate --text-meta
   colour is gone. Everything else is as it shipped. */
:root{
  --blue-deep:#16324F;        
  --paper:#F4F1E8;            
  --paper-dim:#C7D3DD;        
  --redline:#E4572E;          
  --blue-draft:#4E85B8;        
  --blue-900:#0F2439;
  --blue-800:#16324F;
  --blue-700:#1D3F61;
  --blue-600:#2C5A82;
  --blue-400:#4E85B8;
  --blue-200:#C7D3DD;
  --paper-000:#FBF9F3;
  --paper-100:#F4F1E8;
  --paper-200:#E8E3D6;
  --paper-300:#D8D2C2;
  --redline-600:#C6431F;
  --redline-500:#E4572E;
  --redline-100:#F7D5C8;
  --line-on-dark:rgba(244,241,232,0.16);
  --line-on-dark-strong:rgba(244,241,232,0.32);
  --line-on-light:rgba(22,50,79,0.14);
  --line-on-light-strong:rgba(22,50,79,0.28);
  --fill-on-dark:rgba(244,241,232,0.05);
  --fill-on-light:rgba(22,50,79,0.04);
  --surface-page:var(--blue-800);
  --surface-raised:var(--blue-700);
  --surface-sunken:var(--blue-900);
  --surface-card:var(--fill-on-dark);
  --text-heading:var(--paper);
  --text-body:var(--paper-dim);
  /* There is deliberately no --text-meta here. The type scale below owns that
     name as the 14px step, and this block comes first, so a colour declared
     here loses to it silently: every `var(--text-meta)` in the site resolves
     to 14px and always did. Meta text on the dark ground is --paper-dim, which
     is what this token held anyway and what the call sites already write.
     --text-meta-light is the light-ground colour and is unaffected. */
  --border-default:var(--line-on-dark);
  --border-strong:var(--line-on-dark-strong);
  --surface-page-light:var(--paper-100);
  --surface-card-light:var(--paper-000);
  --text-heading-light:var(--blue-800);
  --text-body-light:#40536B;
  --text-meta-light:#6C7C90;
  --border-default-light:var(--line-on-light);
  --action-bg:var(--redline-500);
  --action-fg:var(--paper);
  --action-bg-hover:transparent;
  --action-fg-hover:var(--redline-500);
  --action-border:var(--redline-500);
  --focus-ring:var(--redline-500);
  --link:var(--redline-500);
  --link-hover:var(--paper);
  --diff-changed:var(--redline-500);   
  --diff-base:var(--blue-draft);       
  --diff-dim:var(--paper-dim);         
}
:root{
  --font-sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"Victor Mono",ui-monospace,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --text-display:clamp(30px,4.4vw,44px);
  --text-h2:clamp(24px,3vw,32px);
  --text-h3:20px;
  --text-lede:18px;
  --text-base:16px;
  --text-meta:14px;          /* a size, not a colour -- see the note above */
  --text-micro:12px;
  --leading-display:1.18;
  --leading-heading:1.25;
  --leading-body:1.6;
  --leading-prose:1.65;
  --leading-flat:1;
  --tracking-display:-0.01em;
  --tracking-normal:0;
  --tracking-mono:0.02em;
  --tracking-mono-wide:0.03em;
  --tracking-caps:0.08em;
  --type-display:var(--weight-semibold) var(--text-display)/var(--leading-display) var(--font-sans);
  --type-h2:var(--weight-semibold) var(--text-h2)/var(--leading-heading) var(--font-sans);
  --type-h3:var(--weight-semibold) var(--text-h3)/var(--leading-heading) var(--font-sans);
  --type-lede:var(--weight-regular) var(--text-lede)/var(--leading-body) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-prose) var(--font-sans);
  --type-button:var(--weight-semibold) var(--text-base)/var(--leading-flat) var(--font-sans);
  --type-mark:var(--weight-regular) var(--text-meta)/var(--leading-flat) var(--font-mono);
  --type-caption:var(--weight-regular) var(--text-micro)/var(--leading-flat) var(--font-mono);
  --type-label:var(--weight-medium) var(--text-micro)/var(--leading-flat) var(--font-mono);
  --measure-prose:56ch;
  --measure-narrow:54ch;
}
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:10px;
  --space-4:15px;
  --space-5:18px;
  --space-6:22px;
  --space-7:26px;
  --space-8:28px;
  --space-9:36px;
  --space-10:40px;
  --space-11:48px;
  --space-12:56px;
  --space-13:64px;
  --space-14:96px;
  --space-15:128px;
  --gap-icon-text:var(--space-3);   
  --gap-inline:var(--space-5);      
  --gap-stack:var(--space-6);       
  --gap-block:var(--space-10);      
  --pad-button-y:var(--space-4);    
  --pad-button-x:var(--space-7);    
  --pad-card:var(--space-7);
  --header-pad-top:var(--space-9);  
  --section-pad-y:var(--space-12);  
  --section-pad-y-lg:var(--space-14);
  --caption-gap:var(--space-13);    
}
:root{
  --radius-none:0;
  --radius-sm:2px;
  --radius-pill:999px;
  --border-width:1px;              
  --stroke-drawing:1.4px;          
  --stroke-drawing-changed:1.6px;  
  --stroke-dimension:0.8px;        
  --stroke-icon:1.2px;             
  --dash-provisional:2 3;           
  --border-hairline-dark:var(--border-width) solid var(--line-on-dark);
  --border-hairline-light:var(--border-width) solid var(--line-on-light);
  --border-action:var(--border-width) solid var(--action-border);
}
:root{
  --dur-instant:100ms; 
  --dur-fast:150ms;  
  --dur-medium:220ms; 
  --ease-default:ease; 
  --ease-out:cubic-bezier(0.2,0,0,1); 
  --transition-action:background var(--dur-fast),color var(--dur-fast); 
  --transition-border:border-color var(--dur-fast); 
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;  --dur-fast:0ms;  --dur-medium:0ms;  --transition-action:none;  --transition-border:none }
}
:root{
  --wrap-max:1024px;   
  --wrap-pad:24px;
  --wrap-content:976px;
  --breakpoint-sm:560px;
  --breakpoint-md:900px;
  --shadow-none:none;
  --shadow-panel:0 1px 0 var(--line-on-light);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--surface-page);color:var(--text-heading);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--link);text-decoration:none;transition:var(--transition-action)}
a:hover{color:var(--link-hover)}
::selection{background:var(--redline-500);color:var(--paper)}
:focus-visible{outline:var(--border-width) solid var(--focus-ring);outline-offset:2px}
/* The two families are declared by name in fonts.css, which is enqueued first
   and serves them from this theme. The Astro site reached them through the
   --font-be-vietnam-pro variable its font provider defines; there is no such
   variable here, so the stacks name the families directly. Same families, same
   fallbacks, same order. */

body{ margin:0; background:var(--blue-800); }
img{ max-width:100%; height:auto; }