/**
 * Velonix Labs — Design Tokens & Base Reset
 * Loaded on EVERY page, first in the enqueue order (see inc/enqueue.php).
 * Nothing in this file is page-specific. If a value here changes, it
 * changes everywhere at once — that's the point.
 *
 * Source of truth: velonix-labs-design-system.md, sections 2–4.
 */

:root{
  /* colour */
  --bg:#12151B; --bg-2:#171B22; --surface:#1D222B;
  /* --ink-faint lightened from #5E6474 to #828C9B (same hue/saturation
     family, ~224°/10% vs 216°/11% — only lightness changed, from 41%
     to 56%) so it passes WCAG AA (4.5:1) for the small text it's used
     on sitewide (spec labels, stock status, footer tags, and the
     Contact page's compliance-relevant notices) — the original
     measured 2.70–3.09:1 against this theme's actual background
     tokens, calculated directly, not estimated. Sits between the
     existing --ink-faint and --ink-soft steps rather than colliding
     with either. */
  --ink:#F1F2F4; --ink-soft:#9AA1B2; --ink-faint:#828C9B;
  --line:#2A303B;
  --accent:#5B84E0; --accent-deep:#3E5FB0; --accent-tint:rgba(91,132,224,0.14);
  --func:#C9A468;

  /* shape */
  --radius:8px;
  --radius-lg:16px; /* large feature panels only — see design-rule §9.6 */

  /* layout */
  --container-width:1200px;
  --container-padding:40px;
  --header-height:80px;

  /* logo sizes — measured directly from the approved HTML prototype via
     headless-browser rendering (not estimated). If the approved design
     ever changes, re-measure and update ONLY here — every logo instance
     across the theme reads from these same values, nothing else. */
  --header-logo-height-desktop:36px;
  --header-logo-height-tablet:36px;
  --header-logo-height-mobile:30px;
  --footer-logo-height-desktop:42px;
  --footer-logo-height-tablet:36px;
  --footer-logo-height-mobile:32px;
  --coa-logo-height-desktop:19px;
  --coa-logo-height-mobile:17px;

  /* section rhythm — the page-level vertical spacing scale, reused across
     every page's .section blocks (see components.css) */
  --section-padding-desktop:112px;
  --section-padding-tablet:52px;
  --section-padding-mobile:34px;

  /* typography scale — "body-sm" is the established smaller body-copy
     size already used site-wide (trust cards, research notice) but never
     centralised. Anything meant to be comfortably read as prose should
     use this, not a smaller one-off caption size. */
  --text-body-sm:14px;
  --text-body-sm-line-height:1.75;

  /* icon sizes — every distinct icon size already in use sitewide,
     centralised. Pick from this scale for any new icon rather than
     hard-coding a pixel value. */
  --icon-xs:15px;  /* inline chip icons (trust-chip) */
  --icon-sm:16px;  /* small utility icons (catalogue search field) */
  --icon-md:20px;  /* header/nav utility icons (cart) */
  --icon-lg:22px;  /* feature-list icons (why-item) */
  --icon-xl:32px;  /* card/feature icons (trust-card, empty-state) */
}

*{box-sizing:border-box; margin:0; padding:0;}

body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none; transition:color 0.18s ease;}
h1,h2,h3,.jakarta{font-family:'Plus Jakarta Sans',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
img,svg{display:block; max-width:100%;}

.wrap{max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding);}

/* WordPress' own conventional utility class name for this technique —
   visually hides content while keeping it available to screen readers,
   for cases like the footer newsletter form below where a visible
   label would duplicate what's already conveyed by an icon/placeholder
   but a real <label> is still required for the field to be accessible. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Accessibility: visible focus states, consistent across every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

.logo, .m-logo, .footer-masthead-brand, .mast{display:inline-block; transition:opacity 0.18s ease;}
.logo:hover, .m-logo:hover, .footer-masthead-brand:hover, .mast:hover{opacity:0.75;}