/**
 * Z-Tech Solutions — Design Tokens
 * Ported from "Z-Tech Solutions Homepage.dc.html" (source of truth).
 * Values below were extracted by grepping every hex/rgba/gradient/radius
 * occurrence in the source file and keeping the literal values as found —
 * NOT rounded or averaged. Frequency counts (from the source scan) are
 * noted next to each token so future edits can see which values are the
 * dominant system color vs. a rarer one-off.
 *
 * STATUS: this covers the dominant, verified design-system values (colors,
 * gradients, radii, core rgba border/shadow families, type). It does NOT
 * yet catalog every single one-off rgba/hex occurrence in the 3000+ line
 * source (e.g. rare per-icon accent colors like #CF142B, #ff3d7a, #a855f7
 * used only 1-3 times each — these should be pulled in per-widget as they
 * are built in Phase 3, not pre-declared here as globals they aren't).
 */

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --zt-bg: #0c0d16;
  --zt-bg-radial-overlay: #0a0a12;
  --zt-bg-footer-start: #0c0e1a;
  --zt-bg-footer-end: #080910;

  --zt-text: #e6e4f0;
  --zt-text-muted: #a9a7bd;
  --zt-text-dim-1: #8f8ca6;
  --zt-text-dim-2: #7a7891;
  --zt-text-dim-3: #6f6d84;
  --zt-text-secondary: #c3c1d4;   /* 40 occurrences — secondary copy */
  --zt-text-tertiary: #8f8da4;    /* 17 occurrences */

  --zt-accent-blue: #2f8fd0;      /* dominant accent, hundreds of uses */
  --zt-accent-blue-mid: #5e96ea;
  --zt-accent-blue-strong: #1e6fd9;
  --zt-accent-teal: #37e0d8;      /* dominant accent, 83 uses — most frequent hex in source */
  --zt-accent-teal-soft: #5eead4;
  --zt-badge-blue-text: #5eb8e6;
  --zt-badge-teal-text: #8fd4ec;

  --zt-white: #fff;
  --zt-black: #000;

  --zt-card-fill: rgba(255, 255, 255, .03);   /* 14 occurrences */
  --zt-card-fill-hover: rgba(255, 255, 255, .04); /* 23 occurrences */

  /* ── Border / ring family (rgba(47,143,208,*)) — port exact opacity per element, do not average ── */
  --zt-border-soft-08: rgba(47, 143, 208, .08);
  --zt-border-soft-10: rgba(47, 143, 208, .1);
  --zt-border-soft-14: rgba(47, 143, 208, .14);
  --zt-border-soft-16: rgba(47, 143, 208, .16);
  --zt-border-soft-18: rgba(47, 143, 208, .18);
  --zt-border-soft-20: rgba(47, 143, 208, .2);   /* 29 occurrences */
  --zt-border-soft-25: rgba(47, 143, 208, .25);  /* 29 occurrences */
  --zt-border-soft-28: rgba(47, 143, 208, .28);
  --zt-border-soft-30: rgba(47, 143, 208, .3);

  /* ── Teal glow / focus-ring family (rgba(55,224,216,*)) ── */
  --zt-glow-teal-12: rgba(55, 224, 216, .12);
  --zt-glow-teal-15: rgba(55, 224, 216, .15);   /* 23 occurrences — most common focus ring */
  --zt-glow-teal-20: rgba(55, 224, 216, .2);
  --zt-glow-teal-25: rgba(55, 224, 216, .25);
  --zt-glow-teal-30: rgba(55, 224, 216, .3);
  --zt-glow-teal-35: rgba(55, 224, 216, .35);
  --zt-glow-teal-40: rgba(55, 224, 216, .4);
  --zt-glow-teal-45: rgba(55, 224, 216, .45);

  --zt-shadow-ambient: rgba(0, 0, 0, .5);
  --zt-shadow-ambient-soft: rgba(0, 0, 0, .4);

  /* ── Gradients (exact stops, ported verbatim) ─────────────── */
  --zt-gradient-btn: linear-gradient(120deg, #1e6fd9, #37e0d8);
  --zt-gradient-accent-diag: linear-gradient(135deg, #2f8fd0, #37e0d8);
  --zt-gradient-accent-horiz: linear-gradient(90deg, #2f8fd0, #37e0d8);
  --zt-gradient-accent-multi: linear-gradient(115deg, #2f8fd0, #37e0d8, #5e96ea, #2f8fd0);
  --zt-gradient-accent-blue-mid: linear-gradient(135deg, #2f8fd0, #5e96ea);
  --zt-gradient-footer: linear-gradient(180deg, #0c0e1a, #080910);
  --zt-gradient-panel-a: linear-gradient(180deg, #2a3050, #212640);
  --zt-gradient-panel-b: linear-gradient(180deg, #161826, #0e0f1a);
  --zt-gradient-fade-edge: linear-gradient(180deg, transparent, #141527);
  --zt-gradient-marquee-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);

  /* Radial ambient blobs behind hero/sections — exact positions/sizes from source */
  --zt-radial-teal: radial-gradient(ellipse 45% 40% at 90% 88%, rgba(94, 234, 212, .14), transparent);
  --zt-radial-violet: radial-gradient(ellipse 45% 35% at 12% 15%, rgba(157, 120, 255, .32), transparent);
  --zt-radial-orange: radial-gradient(ellipse 40% 40% at 25% 80%, rgba(255, 130, 90, .16), transparent);
  --zt-radial-blue: radial-gradient(ellipse 40% 35% at 85% 25%, rgba(94, 150, 234, .26), transparent);
  --zt-radial-btn-circle: radial-gradient(circle, rgba(47, 143, 208, .18), transparent);

  /* ── Shape ─────────────────────────────────────────────────── */
  --zt-radius-pill: 999px;   /* 47 occurrences — most common radius */
  --zt-radius-xs: 4px;
  --zt-radius-sm: 5px;
  --zt-radius-standard: 8px; /* 33 occurrences */
  --zt-radius-circle: 50%;
  --zt-radius-card: 12px;    /* small cards, 21 occurrences */
  --zt-radius-card-blog: 14px; /* blog cards, 13 occurrences */
  --zt-radius-lg: 10px;
  --zt-radius-xl: 16px;
  --zt-radius-2xl: 18px;
  --zt-radius-cta-band: 20px; /* CTA bands */
  --zt-radius-3xl: 24px;
  --zt-radius-4xl: 26px;

  /* ── Typography ────────────────────────────────────────────── */
  --zt-font-heading: var(--font-heading, Inter, sans-serif);
  --zt-font-body: var(--font-body, Inter, sans-serif);

  --zt-h1-hero-size: 52px;
  --zt-h1-category-size: 38px;
  --zt-h1-weight: 500;
  --zt-h1-line-height: 1.1;

  /* H2 tiers — exact size at each DOM nesting depth, ported as-is */
  --zt-h2-tier-1: 32px;
  --zt-h2-tier-2: 26px;
  --zt-h2-tier-3: 22px;
  --zt-h2-tier-4: 20px;

  --zt-eyebrow-size: 12px;
  --zt-eyebrow-letter-spacing: .08em;
  --zt-eyebrow-line-height: 1;
  --zt-eyebrow-transform: uppercase;

  /* ── Motion ────────────────────────────────────────────────── */
  --zt-ease-standard: ease;
  --zt-duration-underline: .25s;
  --zt-duration-reveal: .7s;
  --zt-reveal-translate-y: 26px;

  /* Primary button */
  --zt-btn-shadow: 0 8px 28px rgba(55, 224, 216, .35), 0 0 0 1px rgba(55, 224, 216, .25) inset;
  --zt-btn-hover-translate-y: -2px;

  /* Focus ring (most common interactive-state shadow in source, 19 occurrences) */
  --zt-focus-ring: 0 0 0 3px rgba(55, 224, 216, .15);

  /* Ambient/elevated shadows */
  --zt-shadow-elevated: 0 30px 80px rgba(0, 0, 0, .5);
  --zt-shadow-card: 0 8px 20px rgba(0, 0, 0, .4);
  --zt-shadow-panel: 0 20px 60px rgba(0, 0, 0, .5);
  --zt-shadow-glow-sm: 0 0 8px #37e0d8;
  --zt-shadow-glow-md: 0 0 18px rgba(55, 224, 216, .25);

  /* .glow-btn sweep */
  --zt-glow-sweep-skew: -20deg;
  --zt-glow-sweep-start: -60%;
  --zt-glow-sweep-end: 130%;

  /* .link-u / .nav-u underline hover */
  --zt-underline-gradient: linear-gradient(90deg, #2f8fd0, #37e0d8);
}

/*
 * Not yet tokenized (deliberately — these are rare, context-specific
 * one-offs found 1-3 times each in the source, not part of the reusable
 * system): #CF142B (flag icon), #ff3d7a, #a855f7, #7c3aed, #5fe08a,
 * #ffb020, #e0b64d, #ff6a3d, #e05f5f. Each should be pulled in as a
 * component-local value on the specific widget that uses it (Phase 3),
 * with a comment citing which element in source it belongs to — adding
 * them here as global tokens would misrepresent them as reusable system
 * colors when the source does not treat them that way.
 */

/*
 * Container width tiers (2026-09 — "fill more of large screens" request).
 * Every `.zt-w-*` class is paired with an *unchanged* inline `max-width`
 * that already matches one of these tiers (900/1000-1120/1200/1400px) —
 * that inline value stays exactly as the source designed it and is what
 * mobile/tablet actually render, since it's narrower than the viewport
 * there anyway. This block only takes over at >=1280px (a "real desktop"
 * width), where it widens the same container further than the fixed px
 * value alone would, capped so text lines never get absurdly long on an
 * ultrawide monitor.
 */
@media (min-width: 1280px) {
  .zt-w-sm { max-width: min(70vw, 1150px) !important; }
  .zt-w-md { max-width: min(82vw, 1400px) !important; }
  .zt-w-lg { max-width: min(88vw, 1550px) !important; }
  .zt-w-xl { max-width: min(97vw, 1700px) !important; }
}