/* axk-tokens.css — auxjo.com interactive-component kit, brand-mapped
   Namespaced (axk-) so it never collides with the theme's own ax- classes
   or the theme's own ax- custom properties, and every value below points at
   the theme's REAL brand tokens (style.css :root — navy #02217B / cyan
   #33B0EC / 14px radius) rather than introducing a second palette.
   Scoped under .axk-root rather than bare body/* selectors, so nothing
   here can ever leak onto the rest of the theme. Load after style.css. */

:root {
  /* ---- Colour — aliased onto the theme's own :root tokens ----------- */
  --axk-navy:      var(--ax-navy, #02217B);
  --axk-navy-700:  var(--ax-blue, #0b3fae);
  --axk-deep:      var(--ax-ink, #081029);
  --axk-accent:      var(--ax-cyan-dark, #1a7fc4);  /* eyebrows, milestone markers, plant pins */
  --axk-accent-soft: var(--ax-cyan, #33B0EC);       /* soft accent / R&D pins */
  --axk-cool:      var(--ax-cyan, #33B0EC);
  --axk-cool-deep: var(--ax-cyan-dark, #1a7fc4);
  --axk-sand:      var(--ax-gray-50, #f7f9fc);
  --axk-sand-100:  var(--ax-gray-100, #eef1f8);
  --axk-line:      var(--ax-gray-200, #dde3ef);
  --axk-ink:       var(--ax-gray-900, #0e1526);
  --axk-ink-60:    var(--ax-gray-600, #54607a);
  --axk-white:     #FFFFFF;

  /* ---- Type — reuse the theme's own font, no new font load ---------- */
  --axk-font:      'Inter', Arial, Helvetica, sans-serif;
  --axk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --axk-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --axk-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --axk-step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
  --axk-step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.15rem);
  --axk-step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.20rem);
  --axk-step-4:  clamp(2.80rem, 2.00rem + 4.00vw, 5.00rem);
  --axk-step-5:  clamp(3.60rem, 2.20rem + 7.00vw, 8.00rem);

  /* ---- Space, radius, motion — radius/shadow matched to the theme's --- */
  --axk-s1: 0.5rem;  --axk-s2: 1rem;    --axk-s3: 1.5rem;
  --axk-s4: 2.5rem;  --axk-s5: 4rem;    --axk-s6: 6rem;
  --axk-radius: var(--ax-radius, 14px);
  --axk-radius-lg: 20px;
  --axk-shadow: var(--ax-shadow, 0 4px 16px rgba(2,33,123,.08));
  --axk-shadow-lg: var(--ax-shadow-lg, 0 16px 40px rgba(2,33,123,.18));
  --axk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --axk-dur: 180ms;
  --axk-container: 1200px;
}

/* Latin display wants tight tracking. Arabic does not, and needs more leading.
   Scoped to .axk-root so it never touches the rest of the theme's type. */
.axk-root:lang(en) { letter-spacing: -0.011em; }
.axk-root:lang(ar) { letter-spacing: 0; line-height: 1.85; }
.axk-root:lang(ar) .axk-display { line-height: 1.35; }

.axk-root, .axk-root *, .axk-root *::before, .axk-root *::after { box-sizing: border-box; }

.axk-container { max-width: var(--axk-container); margin-inline: auto; padding-inline: var(--axk-s3); }
.axk-display { font-family: var(--axk-font); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; color: var(--axk-ink); }
.axk-root:lang(ar) .axk-display { letter-spacing: 0; }

/* Numbers, model codes and units stay LTR inside Arabic text.
   AUX-12CCW and 5.40 kW do not mirror. */
.axk-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.axk-data { font-family: var(--axk-font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

.axk-root :where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--axk-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.axk-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .axk-root *, .axk-root *::before, .axk-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}