/* ==========================================================================
   GYMZEEK DESIGN TOKENS  v1.0
   Single source of truth for colour, type, spacing, radii, shadows, motion.
   Mirrors docs/wordpress/theme.json so the WordPress/WooCommerce theme can
   inherit the same values. Change a value here and it changes everywhere.
   ========================================================================== */

/* ---------- Fonts (Inter, SIL Open Font Licence 1.1, see fonts/OFL.txt) ---------- */

/* Inter variable (official Inter 4.x build): genuine weights 100-900 and the
   optical-size axis. opsz 32 = Inter Display, so headings get true
   Inter Display Black (900) without synthetic bolding. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Supplied asset: InterDisplay-BlackItalic.otf, converted to WOFF2 (permitted by OFL). */
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display-black-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --gz-charcoal: #101719;      /* primary background */
  --gz-charcoal-2: #162022;    /* raised surfaces on dark */
  --gz-teal: #81c9bd;          /* signature teal: CTAs, accents */
  --gz-teal-hover: #9bd6cc;    /* teal hover (lighter keeps dark-text contrast) */
  --gz-teal-deep: #203a38;     /* gradients, decorative */
  --gz-teal-logo: #2e7d7a;     /* teal used inside the dark logo file */
  --gz-white: #ffffff;
  --gz-offwhite: #f7f9f8;
  --gz-grey: #d0d8d6;          /* supporting text on dark */
  --gz-grey-dim: #9fabab;      /* tertiary text on dark (AA on charcoal: 7.6:1) */
  --gz-ink-soft: #3d4a4c;      /* supporting text on light (AA on off-white: 8.7:1) */
  --gz-error: #ff9b8f;         /* error text on dark (AA on charcoal) */
  --gz-error-ink: #a3261a;     /* error text on light */

  /* ---------- Semantic roles (use these in components) ---------- */
  --color-bg: var(--gz-charcoal);
  --color-surface: var(--gz-charcoal-2);
  --color-surface-light: var(--gz-offwhite);
  --color-text: var(--gz-white);
  --color-text-muted: var(--gz-grey);
  --color-text-subtle: var(--gz-grey-dim);
  --color-text-on-light: var(--gz-charcoal);
  --color-text-on-light-muted: var(--gz-ink-soft);
  --color-accent: var(--gz-teal);
  --color-accent-hover: var(--gz-teal-hover);
  --color-on-accent: var(--gz-charcoal);   /* text on teal: 9.5:1 */
  --color-border: rgba(208, 216, 214, 0.16);
  --color-border-strong: rgba(208, 216, 214, 0.34);
  --color-focus: var(--gz-teal);
  --color-selection-bg: var(--gz-teal);
  --color-selection-text: var(--gz-charcoal);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display-italic: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Fluid type scale: min at 360px viewport, max at 1440px */
  --text-xs: 0.75rem;                                        /* 12px  labels */
  --text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);    /* 13-14px */
  --text-base: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);     /* 15-16px */
  --text-lg: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);        /* 16-18px */
  --text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);       /* 20-24px */
  --text-h2: clamp(1.625rem, 1.38rem + 1.1vw, 2.5rem);       /* 26-40px */
  --text-hero: clamp(2.375rem, 1.66rem + 3.2vw, 4.625rem);   /* 38-74px */

  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-body: 1.65;
  --tracking-display: -0.025em;
  --tracking-label: 0.16em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --container-max: 1180px;
  --measure: 34rem;            /* comfortable paragraph width */

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Controls (buttons, inputs; reused by WooCommerce) ---------- */
  --control-height: 3.25rem;   /* 52px: comfortable tap target */
  --control-pad-x: 1.375rem;
  --control-radius: var(--radius-md);
  --control-border: 1px solid var(--color-border-strong);
  --control-bg-dark: rgba(255, 255, 255, 0.04);
  --btn-font-size: 0.875rem;
  --btn-tracking: 0.08em;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  --glow-teal: 0 0 0 1px rgba(129, 201, 189, 0.25), 0 18px 50px -20px rgba(129, 201, 189, 0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 900ms;

  /* ---------- Brand geometry ---------- */
  --brand-slant: -12deg;       /* matches the italic angle of the wordmark */

  /* ---------- Layers ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 10;

  /* ---------- Breakpoints (reference only: CSS variables cannot be used in
       media queries; components use these literal values)
       --bp-sm: 480px   large phones
       --bp-md: 768px   tablets
       --bp-lg: 1024px  laptops
       --bp-xl: 1440px  desktops ---------- */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}