/* =====================================================================
   Zero2AI Design System — KB #1997 · Direction I "Friendly Robi"
   Single source of truth. A rebrand = edit the :root tokens below.
   Scope: global element + Astra overrides, safe across all pages.
   Aesthetic: light, warm, beginner-first. NOT dark-tech (that's
   Arkionix/AlwaysVault territory — see project memory).
   ===================================================================== */

:root {
  /* ---- Brand (canonical — do not re-pick) ---- */
  --z2-blue:      #009DFC;
  --z2-blue-dk:   #0284c7;
  --z2-orange:    #FF6B35;
  --z2-orange-dk: #e85a28;
  --z2-green:     #10b981;
  --z2-green-dk:  #0d9c6e;
  --z2-navy:      #0F172A;

  /* ---- Surfaces (warm light) ---- */
  --z2-bg:        #FFFDF9;
  --z2-bg-soft:   #FFF3EC;
  --z2-bg-blue:   #EAF6FF;
  --z2-card:      #ffffff;
  --z2-line:      #f0e6dc;

  /* ---- Text ---- */
  --z2-ink:       #20262f;
  --z2-ink-muted: #5b6472;
  --z2-ink-faint: #8a93a3;

  /* ---- Type ---- */
  --z2-font-display: "Baloo 2", ui-rounded, sans-serif;
  --z2-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Shape & depth ---- */
  --z2-radius:    24px;
  --z2-radius-sm: 16px;
  --z2-shadow-sm: 0 2px 8px rgba(32,38,47,.06);
  --z2-shadow-md: 0 10px 28px rgba(32,38,47,.10);
  --z2-shadow-orange: 0 14px 32px rgba(255,107,53,.28);
}

/* =====================================================================
   Global typography & surfaces (Astra-safe overrides)
   ===================================================================== */

body,
.ast-container {
  font-family: var(--z2-font-body);
  color: var(--z2-ink);
}

body {
  background-color: var(--z2-bg);
}

h1, h2, h3, h4,
.entry-title,
.ast-archive-title {
  font-family: var(--z2-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--z2-ink);
}

a {
  color: var(--z2-blue);
}

a:hover {
  color: var(--z2-blue-dk);
}

::selection {
  background: var(--z2-orange);
  color: #fff;
}

/* =====================================================================
   Buttons — chunky, rounded, playful (covers Astra, Gutenberg, EDD/Woo)
   ===================================================================== */

.ast-button,
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.edd-submit,
.single_add_to_cart_button {
  font-family: var(--z2-font-display) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.8rem !important;
  border: none !important;
  background: var(--z2-orange) !important;
  color: #fff !important;
  box-shadow: var(--z2-shadow-orange);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, background .16s ease;
  min-height: 44px;
}

.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.edd-submit:hover,
.single_add_to_cart_button:hover {
  background: var(--z2-orange-dk) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.02);
}

.ast-button:active,
.button:active,
.wp-block-button__link:active {
  transform: scale(.96) translateY(1px);
}

/* Secondary/outline variant — add class z2-btn-ghost in the editor */
.z2-btn-ghost .wp-block-button__link,
.z2-btn-ghost {
  background: var(--z2-card) !important;
  color: var(--z2-ink) !important;
  border: 2.5px solid var(--z2-line) !important;
  box-shadow: var(--z2-shadow-sm);
}

.z2-btn-ghost .wp-block-button__link:hover,
.z2-btn-ghost:hover {
  border-color: var(--z2-orange) !important;
  color: var(--z2-orange-dk) !important;
}

/* Blue variant — add class z2-btn-blue */
.z2-btn-blue .wp-block-button__link,
.z2-btn-blue {
  background: var(--z2-blue) !important;
  box-shadow: 0 14px 32px rgba(0,157,252,.26);
}

.z2-btn-blue .wp-block-button__link:hover,
.z2-btn-blue:hover {
  background: var(--z2-blue-dk) !important;
}

/* =====================================================================
   Cards, sections, imagery
   ===================================================================== */

/* Generic card helper — add class z2-card to any group/column block */
.z2-card {
  background: var(--z2-card);
  border: 2px solid var(--z2-line);
  border-radius: var(--z2-radius);
  box-shadow: var(--z2-shadow-sm);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}

.z2-card:hover {
  transform: translateY(-6px);
}

/* Warm / blue section washes — add to group blocks */
.z2-section-soft { background: var(--z2-bg-soft); }
.z2-section-blue { background: var(--z2-bg-blue); }

/* Dashed section divider */
.z2-divider {
  border: none;
  border-top: 2px dashed var(--z2-line);
}

/* Rounded imagery by default in content */
.entry-content img,
.wp-block-image img {
  border-radius: var(--z2-radius-sm);
}

/* Eyebrow pill — add class z2-eyebrow to a paragraph block */
.z2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--z2-orange-dk);
  background: var(--z2-bg-soft);
  padding: .45rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,107,53,.2);
}

/* =====================================================================
   Forms (MailerLite embeds, EDD checkout, comments)
   ===================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 2px solid var(--z2-line) !important;
  border-radius: var(--z2-radius-sm) !important;
  background: var(--z2-card);
  color: var(--z2-ink);
  font-family: var(--z2-font-body);
  min-height: 44px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--z2-orange) !important;
  outline: none;
}

/* =====================================================================
   Header / footer polish
   ===================================================================== */

.main-header-bar,
.ast-primary-header-bar {
  border-bottom: 2px solid var(--z2-line);
  background: var(--z2-bg);
}

.main-header-menu a {
  font-weight: 700;
  color: var(--z2-ink-muted);
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
  color: var(--z2-orange-dk);
}

.site-footer,
.ast-footer-overlay {
  background: var(--z2-bg-soft);
  border-top: 2px dashed var(--z2-line);
}

/* =====================================================================
   Accessibility & motion
   ===================================================================== */

:focus-visible {
  outline: 3px solid rgba(0,157,252,.45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}