/*
Theme Name: SavrIT HQ
Theme URI: https://savrit.co.za
Author: SavrIT
Description: Custom theme for SavrIT HQ — the marketing and content site for the SavrIT Mobile App, Data Platform, and Business Platform. Built from scratch (no page builder) as block-editor-friendly classic PHP templates.
Version: 0.1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: savrit-hq
*/

/* ==========================================================================
   Design tokens
   Base colors/radius/type scale are carried over from the shipped mobile
   app (mobile/src/theme.ts) so the site and the app read as one product.
   Dark Forest Green / light Accent Green extend that palette for gradients
   and are placeholders until the real logo file is available to color-pick
   exact hex values from.
   ========================================================================== */
:root {
  /* Greens — dark/accent are color-picked directly from the real logo
     (website/assets/brand/logo.png); primary stays the app's shipped
     accent (mobile/src/theme.ts) so the site and app read as one product. */
  --savrit-green-primary: #0f7a45;   /* mobile app accent — source of truth */
  --savrit-green-dark: #1c5727;      /* picked from logo: basket left / wordmark "Savr" */
  --savrit-green-accent: #89b32c;    /* picked from logo: basket right / wordmark "IT" */
  --savrit-green-soft: #e8f6ee;      /* accentSoft from mobile theme */

  /* Button/badge gradient — deliberately only two stops (dark → primary),
     not three. White text sits on top everywhere this is used, and the
     brand's lightest accent green (#89b32c) only gives 2.46:1 contrast
     with white — fails WCAG AA's 4.5:1 for normal text. Verified via a
     manual luminance-contrast pass, not eyeballed. */
  --savrit-gradient: linear-gradient(135deg, var(--savrit-green-dark) 0%, var(--savrit-green-primary) 100%);
  /* Gradient used as a *text* fill (background-clip:text) on headings and
     stat numbers — separate from the button gradient above because the
     background it's read against is the page canvas, not a solid green
     fill behind white text. Dark mode overrides this below. */
  --savrit-gradient-text: linear-gradient(135deg, var(--savrit-green-dark) 0%, var(--savrit-green-primary) 55%, var(--savrit-green-accent) 100%);
  --savrit-gradient-soft: linear-gradient(180deg, var(--savrit-card) 0%, var(--savrit-green-soft) 100%);

  /* Neutrals */
  --savrit-canvas: #f2f4f7;
  --savrit-card: #ffffff;
  --savrit-ink: #0b1220;
  /* Nudged from #6b7280 — that measured 4.39:1 against the canvas
     background, just under WCAG AA's 4.5:1 for normal-size text (this is
     the default <p> color, used everywhere). #63707c clears 4.60:1 while
     reading as essentially the same gray. */
  --savrit-muted: #63707c;
  --savrit-line: #e6e8ee;
  /* Stronger-than-line border for interactive components (form fields,
     outline buttons) that need to meet WCAG 1.4.11's 3:1 non-text
     contrast — --savrit-line alone measures ~1.2:1 against the card
     background in both themes, too subtle for a control boundary. */
  --savrit-border-strong: var(--savrit-muted);
  /* Text/icon color for links, small accent labels (eyebrows, roadmap
     pills), and focus rings — same as green-primary in light mode, but
     swapped to the lighter accent green in dark mode below, where
     green-primary alone only clears 2.8–3.5:1 against dark backgrounds. */
  --savrit-link: var(--savrit-green-primary);

  /* Feedback */
  --savrit-danger: #b42318;
  --savrit-danger-soft: #fef3f2;
  --savrit-warn: #b54708;
  --savrit-warn-soft: #fffaeb;

  /* Radius */
  --savrit-radius-sm: 12px;
  --savrit-radius-md: 16px;
  --savrit-radius-lg: 22px;
  --savrit-radius-pill: 999px;

  /* Shadow */
  --savrit-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 1px rgba(11, 18, 32, 0.03);
  --savrit-shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08);
  --savrit-shadow-lg: 0 24px 48px rgba(11, 18, 32, 0.12);

  /* Spacing */
  --savrit-space-xs: 6px;
  --savrit-space-sm: 10px;
  --savrit-space-md: 16px;
  --savrit-space-lg: 24px;
  --savrit-space-xl: 32px;
  --savrit-space-2xl: 48px;
  --savrit-space-3xl: 80px;

  /* Type */
  --savrit-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --savrit-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --savrit-container: 1160px;
  --savrit-header-h: 76px;
}

:root[data-theme="dark"] {
  --savrit-canvas: #0b1220;
  --savrit-card: #121a2b;
  --savrit-ink: #f2f4f7;
  --savrit-muted: #9aa4b2;
  --savrit-line: #22293a;
  --savrit-green-soft: #0f2a1c;
  --savrit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --savrit-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --savrit-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  /* green-primary only measures 2.8–3.5:1 against dark backgrounds —
     below AA's 4.5:1 for normal-size text (verified: 2.84:1 on the
     eyebrow pill's dark background, 3.22:1 on dark cards). The accent
     green clears 6.25–7.6:1 in the same spots. */
  --savrit-link: var(--savrit-green-accent);
  /* Drop the too-dark green-dark stop, which falls to 2.18:1 against the
     dark canvas — even large heading/stat text needs 3:1. primary→accent
     clears 3.47:1 / 7.62:1. */
  --savrit-gradient-text: linear-gradient(135deg, var(--savrit-green-primary) 0%, var(--savrit-green-accent) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --savrit-canvas: #0b1220;
    --savrit-card: #121a2b;
    --savrit-ink: #f2f4f7;
    --savrit-muted: #9aa4b2;
    --savrit-line: #22293a;
    --savrit-green-soft: #0f2a1c;
    --savrit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --savrit-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --savrit-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
    --savrit-link: var(--savrit-green-accent);
    --savrit-gradient-text: linear-gradient(135deg, var(--savrit-green-primary) 0%, var(--savrit-green-accent) 100%);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--savrit-canvas);
  color: var(--savrit-ink);
  font-family: var(--savrit-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--savrit-font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--savrit-space-md);
}
p { margin: 0 0 var(--savrit-space-md); color: var(--savrit-muted); }
:focus-visible {
  /* Raw accent green only clears 2.2–2.5:1 against light backgrounds —
     below the 3:1 WCAG 1.4.11 needs for a focus indicator to actually be
     visible. --savrit-link resolves to a color verified ≥3:1 in both
     themes (green-primary light / green-accent dark). */
  outline: 3px solid var(--savrit-link);
  outline-offset: 2px;
}