/* ═════════════════════════════════════════════════════════════
   tokens.css — the single source of truth for the narimani.me
   design system (BRAND.md §6, v1.1 "champagne metallic" gold).
   Every page-scoped token block must alias to these; do not add
   new raw hex values in templates.
   ═════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas & surfaces (obsidian) ─────────────────────────── */
  --bg: #080809;
  --surface-1: #0d0d0f;
  --surface-2: #111114;
  --surface-3: #16161a;
  --border: rgba(232, 230, 225, 0.10);
  --border-strong: rgba(232, 230, 225, 0.18);

  /* ── Ink ──────────────────────────────────────────────────── */
  --text: #e8e6e1;          /* warm paper ink, never pure white */
  --text-muted: #8a8884;    /* 5.6:1 on --bg — body copy floor  */
  --text-faint: #57544e;    /* decorative only, never real text */

  /* ── Gold — champagne metallic (the one true gold) ────────── */
  --gold: #d6b25e;
  --gold-hover: #e2c374;
  --gold-deep: #a8842f;
  --gold-bright: #ecd9a0;
  --gold-rgb: 214, 178, 94;
  --gold-dim: rgba(214, 178, 94, 0.12);
  --gold-line: rgba(214, 178, 94, 0.38);
  --gold-gradient: linear-gradient(135deg, #ecd9a0 0%, #d6b25e 55%, #a8842f 100%);
  --gold-text-gradient: linear-gradient(105deg, #ecd9a0, #d6b25e 45%, #b8923c);

  /* ── Functional accents (rare, purposeful) ────────────────── */
  --signal: #3ddc84;        /* alive / positive — use sparingly  */
  --teal: #2dd4bf;          /* growth / coaching secondary       */
  --ok: #22c55e;
  --warn: #facc15;
  --danger: #ef4444;

  /* ── Typography ───────────────────────────────────────────── */
  --font-fa: 'Estedad', 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-en-display: 'Inter', system-ui, sans-serif;
  --font-en: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --text-base: clamp(1rem, 0.94rem + 0.2vw, 1.09rem);  /* ≥16px always */
  --leading-body: 1.85;
  --leading-heading-fa: 1.38;
  --leading-heading-en: 1.14;

  --h1: clamp(2rem, 4vw, 3.35rem);
  --h2: clamp(1.45rem, 2.6vw, 2.05rem);
  --h3: clamp(1.1rem, 1.7vw, 1.32rem);

  /* ── Layout ───────────────────────────────────────────────── */
  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --radius-sharp: 2px;      /* cinematic layer — decisive, engineered */
  --radius-ui: 12px;        /* interactive layer — buttons, panels    */

  /* ── Spacing scale (4/8 rhythm) ───────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ── Legacy shims — variables main.css still consumes.
        (palette.css was removed; these keep old selectors alive
        until the last legacy rules are purged.) ───────────────── */
  --bg-dark: var(--bg);
  --bg-body: var(--bg);
  --brand-primary: var(--gold);
  --brand-primary-dark: var(--gold-deep);
  --surface-light: var(--surface-2);
  --text-on-dark: var(--text);
  --text-body-light: var(--text);
  --text-heading-light: var(--text);
}

/* ═══ Keyboard focus — visible everywhere, invisible for mouse ═══ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══ Skip link (a11y) ═══ */
.skip-link {
  position: fixed;
  top: -100px;
  inset-inline-start: 1rem;
  z-index: 1000000;
  background: var(--gold);
  color: #14120a;
  font-weight: 800;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-ui);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 1rem; }

/* ═══ Shared button system ═══
   .btn-gold  — primary CTA (metallic champagne)
   .btn-ghost — secondary, hairline gold
   .btn-modern is a legacy alias used across coaching/booking flows. */
.btn-gold,
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.72rem 1.9rem;
  border: none;
  border-radius: var(--radius-ui);
  background: var(--gold-gradient);
  color: #14120a !important;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.btn-gold:hover,
.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--gold-rgb), 0.34);
  filter: brightness(1.05);
}
.btn-gold:active,
.btn-modern:active { transform: translateY(0); }
.btn-gold[disabled], .btn-gold[aria-disabled="true"], .btn-gold.is-loading,
.btn-modern[disabled], .btn-modern[aria-disabled="true"], .btn-modern.is-loading {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.68rem 1.7rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--gold) !important;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.btn-ghost:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Submit-pending state: pair with JS that sets .is-loading on submit */
.btn-gold.is-loading::after,
.btn-modern.is-loading::after {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid rgba(20, 18, 10, 0.35);
  border-top-color: #14120a;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ═══ Utilities ═══ */
.u-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.u-table-scroll table { min-width: 560px; }
.tabular, .u-tabular { font-variant-numeric: tabular-nums; }
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-modern, .btn-ghost, .skip-link { transition: none; }
  .btn-gold.is-loading::after, .btn-modern.is-loading::after { animation-duration: 1.4s; }
}