/* Design tokens shared by every block. Add new tokens here, never redefine
   color/spacing/shadow values inline in a block's own CSS file. */
:root{
  --red:#d1434f;
  --red-2:#e15b68;
  --red-rgb:209,67,79;
  --red-2-rgb:225,91,104;
  --blue:#23253c;
  --blue-2:#3f4468;
  --blue-rgb:35,37,60;
  --blue-2-rgb:63,68,104;
  --amber:#b8791c;
  --amber-2:#d99a2b;
  --amber-rgb:184,121,28;
  --amber-2-rgb:217,154,43;
  /* Per-template brand accent for solution pages (hero-solutions.css,
     features-grid.css, compare-cards.css, etc.) — defaults to red so
     nothing changes unless a template overrides it. To theme a new
     solution template a different color, add one rule scoped to its
     page-template body class (see .page-template-template-resenje-mastgo
     below, and the aigo_page_template_body_class() filter in
     functions.php that makes that class available for any post type,
     not just Pages):
       .page-template-template-resenje-{slug}{
         --page-accent:var(--amber); --page-accent-2:var(--amber-2);
         --page-accent-rgb:var(--amber-rgb); --page-accent-2-rgb:var(--amber-2-rgb);
       }
     Every solution-page block reads var(--page-accent)/var(--page-accent-rgb)
     instead of var(--red)/184,36,28 directly, so that one rule re-colors
     the whole template. Named --page-accent (not --accent) because base.css
     already has an unrelated, narrower --accent used for a per-card-type
     corner-dot decoration (.feature/.compare-card/etc.) — don't merge the
     two, that one has its own deliberate per-card-type overrides
     (.step-card is hardcoded blue there regardless of page). */
  --page-accent:var(--red);
  --page-accent-2:var(--red-2);
  --page-accent-rgb:var(--red-rgb);
  --page-accent-2-rgb:var(--red-2-rgb);
  --text:#17181b;
  --muted:#727782;
  /* Shared neutral hierarchy for supporting copy and navigation. */
  --text-secondary:#3a3f48;
  --text-tertiary:var(--text-secondary);
  --text-nav:#343842;
  --line:#ececef;
  --soft:#f8f8fa;
  --soft-2:#f3f4f7;
  --white:#ffffff;
  --shadow:0 18px 55px rgba(24, 27, 34, .06);
  --shadow-lg:0 28px 80px rgba(24, 27, 34, .08);
  --shadow-hover:0 22px 58px rgba(24, 27, 34, .08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --max:1260px;
  --container-gutter:clamp(20px,3.5vw,44px);
  --section-space:clamp(64px,7vw,96px);
  --section-space-sm:clamp(44px,5vw,64px);
  --content-measure:68ch;
  /* Spacing scale — for new spacing, use these (or the p-/m-/gap- helper
     classes in utilities.css) instead of ad-hoc pixel values. Existing
     block styles keep their own hand-tuned values; this is for new work. */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --fs-hero:clamp(44px,5vw,68px);
  --fs-section:clamp(34px,3.8vw,50px);
  --fs-panel:clamp(29px,2.8vw,39px);
  --fs-subhead:clamp(22px,2vw,25px);
  --fs-card-title:clamp(20px,1.7vw,22px);
  --fs-card-title-sm:19px;
  --fs-body-lg:clamp(17px,1.35vw,18px);
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-label:13px;
  --fs-meta:12px;
  --fs-control:15px;
  --lh-display:1.02;
  --lh-tight:1.1;
  --lh-title:1.2;
  --lh-body:1.6;
  --tracking-display:-.045em;
  --tracking-heading:-.038em;
  --tracking-title:-.022em;
  --dot-muted:transparent;
  /* The actual AIGO logo mark (assets/images/aigo-logo.svg): a 3x3 grid
     of SOLID dots, 7 in the brand color, 2 in a fixed muted grey — at
     middle-left and bottom-middle, sampled directly from the logo file.
     Not hollow rings; every dot is filled. */
  --brand-dots:
    radial-gradient(circle at 2px 2px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 8px 2px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 14px 2px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 2px 8px, var(--dot-muted) 0 2px, transparent 2.2px),
    radial-gradient(circle at 8px 8px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 14px 8px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 2px 14px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 8px 14px, var(--dot-muted) 0 2px, transparent 2.2px),
    radial-gradient(circle at 14px 14px, currentColor 0 2px, transparent 2.2px);
  /* Three-dot brand mark — a smaller, standalone sibling of --brand-dots
     for tight spaces, same idea: mostly brand color, one dot muted. */
  --brand-dots-trio:
    radial-gradient(circle at 3px 3px, currentColor 0 3px, transparent 3.2px),
    radial-gradient(circle at 13px 3px, currentColor 0 3px, transparent 3.2px),
    radial-gradient(circle at 23px 3px, var(--dot-muted) 0 3px, transparent 3.2px);
  /* --brand-dots scaled 1.2x (dot radius + spacing together, so it keeps
     tiling seamlessly) for the large repeating hero dot-field (.brand-dots
     in styles.css) — kept separate from --brand-dots because every other
     consumer of that token is a fixed 16x16px icon sized for the
     original scale; bumping the shared token would overflow those. */
  --brand-dots-lg:
    radial-gradient(circle at 2.4px 2.4px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 9.6px 2.4px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 16.8px 2.4px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 2.4px 9.6px, var(--dot-muted) 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 9.6px 9.6px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 16.8px 9.6px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 2.4px 16.8px, currentColor 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 9.6px 16.8px, var(--dot-muted) 0 2.4px, transparent 2.64px),
    radial-gradient(circle at 16.8px 16.8px, currentColor 0 2.4px, transparent 2.64px);
}

/* M.A.S.T.:GO's solution page — blue instead of the site-default red
   accent. See the --page-accent comment above for how to add the next one. */
.page-template-template-resenje-mastgo{
  --page-accent:var(--blue);
  --page-accent-2:var(--blue-2);
  --page-accent-rgb:var(--blue-rgb);
  --page-accent-2-rgb:var(--blue-2-rgb);
}

/* Business Intelligence's solution page — also blue, per explicit request. */
.page-template-template-resenje-business-intelligence{
  --page-accent:var(--blue);
  --page-accent-2:var(--blue-2);
  --page-accent-rgb:var(--blue-rgb);
  --page-accent-2-rgb:var(--blue-2-rgb);
}

/* BEST:GO's solution page — also blue, per explicit request. */
.page-template-template-resenje-bestgo{
  --page-accent:var(--blue);
  --page-accent-2:var(--blue-2);
  --page-accent-rgb:var(--blue-rgb);
  --page-accent-2-rgb:var(--blue-2-rgb);
}

@media (max-width:820px){
  :root{
    --container-gutter:20px;
    --section-space:64px;
    --section-space-sm:44px;
    --fs-hero:clamp(38px,10vw,50px);
    --fs-section:clamp(31px,8vw,36px);
    --fs-panel:clamp(27px,7vw,31px);
    --fs-subhead:21px;
    --fs-card-title:20px;
    --fs-card-title-sm:18px;
    --fs-body-lg:17px;
  }
}