/* ============================================================
   Brand Studio kit: "AtlasGTM Marketing" (kit #94)
   Design tokens exactly as defined in the kit. page.css consumes
   these via var() with the same values as fallbacks, so changing
   a token here moves the whole page.
   ============================================================ */
:root{
  /* colors */
  --brand-primary:#52a0ff;
  --brand-secondary:#a672f7;
  --brand-accent:#a672f7;
  --brand-background:#f9fafb;
  --brand-surface:#ffffff;
  --brand-text:#374151;
  --brand-muted:#64748b;
  --brand-border:#e5e7eb;

  /* typography */
  --brand-font-heading:Inter, system-ui, sans-serif;
  --brand-font-body:Inter, system-ui, sans-serif;
  --brand-base-size:16px;
  --brand-scale:1.25;

  /* radius */
  --brand-radius-sm:6px;
  --brand-radius-md:10px;
  --brand-radius-lg:16px;

  /* spacing */
  --brand-space-unit:8px;

  /* logo assets (public, no login) */
  --brand-logo:url("https://atlasgtm.io/wp-content/uploads/atlas-public/brand/35/AtlasGTM-4.png");
  --brand-favicon:url("https://atlasgtm.io/wp-content/uploads/atlas-public/brand/35/AtlasGTM-4.png");

  /* Google's four brand colours, used only as an accent rule */
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC05;
  --g-green:#34A853;
}

/* ---------- co-brand lockup ----------
   The Google Cloud logo is the real mark, served from a-gcloud.js
   as a local asset (no third-party hotlinking). The four-colour
   rule below is used only as a thin accent, never as a substitute
   logo.
   -------------------------------------------------------------- */
.grule{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%);}