/* LAKRAZ design tokens v1
 * Shared across index.html, gvllery.html, services.html.
 * Link this file AFTER per-page <style> so new tokens and utilities win.
 * Additive only. Existing tokens (--bg, --fg, --off, --dim, --rule, --f,
 * the --space- scale, --ease) stay defined per page and are not redeclared.
 */

:root {
  /* Type scale — centralizes the clamp() values currently repeated inline */
  --text-micro:   10px;
  --text-caption: 12px;
  --text-body:    13px;
  --text-lead:    clamp(15px, 1.6vw, 20px);
  --text-sub:     clamp(16px, 2vw, 24px);
  --text-h4:      clamp(16px, 1.8vw, 22px);
  --text-h3:      clamp(22px, 2.8vw, 34px);
  --text-h2:      clamp(32px, 5vw, 64px);
  --text-h1:      clamp(48px, 9vw, 140px);
  --text-display: clamp(60px, 12vw, 200px);

  --tracking-label: .35em;
  --tracking-nav:   .22em;
  --tracking-btn:   .22em;

  /* Layout */
  --gutter:    clamp(24px, 5vw, 80px);
  --container: 1320px;
  --space-xs:  clamp(24px, 3vw, 40px);

  /* Color — semantic aliases + a11y additions. Does not override existing. */
  --color-rule-hi: rgba(255,255,255,.22);
  --color-focus:   #fff;
  --color-error:   #e06767;

  /* Motion */
  --dur-fast: .3s;
  --dur-base: .55s;
  --dur-slow: .95s;
}

/* ─── A11y: visible focus ring for keyboard users ────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
/* Inputs keep the existing underline treatment — ring only on wrapper */
input:focus-visible,
textarea:focus-visible {
  outline: none;
}
.capture-form:focus-within,
.hs-form-frame:focus-within {
  outline: none;
}

/* ─── Screen-reader only ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── CTA hierarchy ──────────────────────────────────────────────── */
/* Primary = white fill, black text (invitation that earns its weight).
 * Aliased to the existing .btn--fill so no HTML needs to change.
 * Use .btn--primary on new markup; .btn--fill keeps working. */
.btn--primary {
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
}
.btn--primary:hover {
  background: transparent;
  color: var(--fg);
}

/* Large modifier for final/hero CTAs — "Let's Talk", "Work With Us" */
.btn--lg {
  font-size: 11px;
  padding: 18px 40px;
  letter-spacing: .24em;
}

/* ─── Reduced motion — belt and suspenders ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}