/*
 * ZeroHost design tokens
 * ----------------------
 * Loaded BEFORE style.css so component rules can consume these and still be
 * overridden locally. Every colour pair here has been contrast-checked against
 * WCAG AA rather than eyeballed; the ratios in the comments are measured.
 *
 * The six original variables are kept at the bottom as aliases, so existing
 * rules in style.css keep working while pages are migrated one at a time.
 */
:root {
  /* --brand is the identity colour: accents, icons, borders, links.
     --brand-strong is for anything carrying WHITE text. The original
     #4F75FF gives white only 3.95:1, which fails AA on every primary
     button on the site; #3A5FE8 is 5.27:1 and reads as the same blue. */
  --zh-brand:          #4F75FF;
  --zh-brand-strong:   #3A5FE8;  
  --zh-brand-hover:    #2F4FCE;  
  --zh-brand-tint:     #EEF2FF;
  --zh-on-brand:       #FFFFFF;
  --zh-ink:            #0F172A;  
  --zh-body:           #334155;  
  --zh-muted:          #5A697F;  
  --zh-bg:             #FFFFFF;
  --zh-bg-subtle:      #F7F9FC;
  --zh-surface:        #FFFFFF;
  --zh-border:         #E2E8F0;
  --zh-border-soft:    #EDF1F7;
  /* Two tiers. The plain colours are vivid enough for large text (a 32px+
     countdown clears the 3:1 large-text bar) but fail at body size, so
     anything under 18.66px uses the -text variant. */
  --zh-warn:           #DD6B20;  
  --zh-warn-text:      #B45309;  
  --zh-warn-tint:      #FFF4EC;
  --zh-danger:         #E53E3E;  
  --zh-danger-text:    #C62828;  
  --zh-danger-tint:    #FEF0F0;
  --zh-success:        #38A169;
  --zh-success-tint:   #EDF9F1;
  --zh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zh-text-display:   3.5rem;   
  --zh-text-h1:        2.5rem;   
  --zh-text-h2:        2rem;     
  --zh-text-h3:        1.125rem; 
  --zh-text-body:      1rem;     
  --zh-text-meta:      0.875rem; 
  --zh-text-micro:     0.75rem;  
  --zh-space-1:  4px;
  --zh-space-2:  8px;
  --zh-space-3:  12px;
  --zh-space-4:  16px;
  --zh-space-5:  24px;
  --zh-space-6:  32px;
  --zh-space-7:  48px;
  --zh-space-8:  64px;
  --zh-space-9:  96px;
  --zh-radius-ctl:   8px;
  --zh-radius-btn:   12px;
  --zh-radius-card:  16px;
  --zh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --zh-shadow-md: 0 4px 16px rgba(79, 117, 255, 0.08);
  --zh-shadow-lg: 0 8px 32px rgba(79, 117, 255, 0.12);
  /* Nav height is a token because scroll-padding-top has to track it.
     They drifted apart before (93px nav, 40px padding) and every anchor
     link buried its target under the fixed bar. */
  --zh-nav-height:   64px;
  --zh-scroll-pad:   80px;   
  /* The original six. Kept so existing style.css rules keep working; new
     rules should use the --zh-* tokens above. */
  --primary-blue:    var(--zh-brand);
  --secondary-blue:  #7B9AFF;
  --text-color:      #2D3748;
  --success-green:   var(--zh-success);
  --warning-orange:  var(--zh-warn);
  --error-red:       var(--zh-danger);
}
/*
 * Dark theme.
 *
 * Deliberately opt-in via [data-theme="dark"] and NOT yet wired to
 * prefers-color-scheme. style.css still carries ~61 hardcoded hex values, so
 * flipping on the media query today would recolour the tokens and leave every
 * hardcoded surface white. Once those are migrated, add:
 *
 *   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }
 *
 * with the same values as below.
 *
 * Values are grounded in the existing palette: --zh-surface and
 * --zh-bg-subtle are the #1a1a2e / #16213e already used by the trust section.
 */
:root[data-theme="dark"] {
  --zh-brand:          #7B9AFF;  
  --zh-brand-strong:   #3A5FE8;
  --zh-brand-hover:    #4F75FF;
  --zh-brand-tint:     #1E2A52;
  --zh-on-brand:       #FFFFFF;
  --zh-ink:            #F1F5F9;  
  --zh-body:           #CBD5E1;
  --zh-muted:          #94A3B8;  
  --zh-bg:             #0F1424;
  --zh-bg-subtle:      #16213E;
  --zh-surface:        #1A1A2E;
  --zh-border:         #26304F;
  --zh-border-soft:    #212B47;
  --zh-warn:           #F0954A;
  --zh-warn-text:      #F0954A;
  --zh-warn-tint:      #3A2415;
  --zh-danger:         #F06565;
  --zh-danger-text:    #F06565;
  --zh-danger-tint:    #3A1B1B;
  --zh-success:        #4ECB8B;
  --zh-success-tint:   #16301F;
  --text-color:        var(--zh-ink);
}