/* ===== assets/css/base.css ===== */
/* =============================================================================
   base.css — Varedat.io prototype
   Fonts · design tokens · reset · typography · layout primitives · utilities
   RTL-first. Logical properties everywhere. No framework.
   WP mapping: tokens → theme.json settings.custom; file enqueued first.
   ============================================================================= */

/* ---------- Fonts (self-hosted; no third-party font hosts) ---------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/f16d6f9df82b.woff2") format("woff2-variations"),
       url("../fonts/f16d6f9df82b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/802bb01c8c6c.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/7dc13ceb318b.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* --figures-uncover — the band of the figures section's own white that the
     hero curtain travels across.

     It appears TWICE and the two must stay equal or the page breaks in one of
     two ways: .figures pulls itself up by this amount so the box begins before
     the curtain ends, and .hero-transition adds the same amount of scroll room
     so the pull-up has something to consume. Reduce one without the other and
     either the figures copy lands under the pinned hero, or the reader gets the
     difference as an extra band of empty white.

     Was 100vh, which is what the client saw as "a whole white screen before the
     figures section arrives". Measured at 1440x900: 900px of nothing above the
     first line of copy. 46vh keeps the uncover -- there is still white behind
     the curtain for the edge to travel across -- and gets the copy on screen
     roughly half a screen sooner. */
  --figures-uncover: 46vh;

  /* colour */
  --color-ink: #0f1419;
  --color-ink-2: #4f5863;
  --color-surface: #f3f4f2;
  --color-surface-2: #ffffff;
  --color-surface-dark: #14191f;
  --color-line: #d8dce0;
  --color-line-strong: #b9c0c7;
  /* v43: BLUE (client). The burnt orange is retired from the interface. The globe keeps its
     own warm palette — that is a separate token family (--globe-* / --arrow-*) and the client
     did not ask for it — and #4f52e0 is already on the page as the services strip's reveal
     band, so the interface and the journey now agree instead of running two accents. */
  --color-accent: #3b3fd0;
  --color-accent-bright: #4f52e0;
  --color-accent-soft: #9093f2;
  --color-accent-tint: #ecedfd;
  --color-focus: #0f1419;

  /* semantic aliases */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-2);
  --color-background: var(--color-surface);
  --color-primary: var(--color-accent);
  --color-on-primary: #ffffff;

  /* type */
  --font-sans: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 1.6rem + 5vw, 6rem);
  --text-h1: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);   /* 32px floor keeps the Persian H1 to ~4 lines at 360px */
  --text-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --text-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --text-h4: 1.125rem;
  --text-body-l: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --text-button: 0.9375rem;

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.8;
  --leading-body-l: 1.85;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;
  --space-12: 12.5rem;
  --space-section: clamp(4rem, 8vw, 10rem);

  /* layout */
  --container: 82rem;
  --container-wide: 96rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-height: 4.5rem;

  /* shape */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* elevation — tinted with the ink hue, single light source */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06), 0 1px 1px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 20, 25, 0.18), 0 2px 6px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 24px 60px -20px rgba(15, 20, 25, 0.28), 0 4px 12px rgba(15, 20, 25, 0.06);

  /* motion */
  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transition-base: 260ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 420ms cubic-bezier(0.2, 0, 0, 1);

  /* z-index scale */
  --z-header: 100;
  --z-menu: 110;
  --z-skip: 120;

  color-scheme: light;
}

@media (max-width: 63.99em) {
  :root { --figures-uncover: 32vh; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;                 /* belt and braces: no sideways scroll from oversized decorative layers */
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent-tint);
  color: var(--color-ink);
}

/* ---------- Typography ---------- */
.display,
.h1, .h2, .h3, .h4 {
  font-weight: 700;
  line-height: var(--leading-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.display {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
}

.h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
}

.h4 {
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.4;
}

.lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-text-muted);
  max-width: 34ch;
  text-wrap: pretty;
}

.small {
  font-size: var(--text-small);
  line-height: 1.6;
}

/* Monospace "spec label" — the datasheet/BOM voice */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow: a mono label with a copper tick — reused above every section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.eyebrow::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* ---------- Layout primitives ---------- */
.container {
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--wide {
  inline-size: min(100% - 2 * var(--gutter), var(--container-wide));
}

.container--narrow {
  inline-size: min(100% - 2 * var(--gutter), var(--container-narrow));
}

.section {
  padding-block: var(--space-section) calc(var(--space-section) * 1.15);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--dark {
  background: var(--color-surface-dark);
  color: var(--color-surface);
  --color-text: var(--color-surface);
  --color-text-muted: #a6adb6;
  --color-line: #2a313a;
  --color-focus: var(--color-surface);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-3));
  align-items: center;
}

/* ---------- Utilities ---------- */
.u-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Latin runs inside RTL text: part numbers, URLs, codes */
.u-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.u-muted {
  color: var(--color-text-muted);
}

.u-accent {
  color: var(--color-accent);
}

/* Directional icons flip in RTL (arrows, chevrons pointing "forward") */
[dir="rtl"] .icon-dir {
  transform: scaleX(-1);
}

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* Skip link — first focusable element on the page */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--color-accent-soft);
}

/* Placeholder marker — anything the client must replace is visually flagged
   in the prototype and removed in the WP phase. */
[data-placeholder] {
  position: relative;
  outline: 1px dashed var(--color-accent-bright);
  outline-offset: 4px;
}

[data-placeholder]::after {
  content: "PLACEHOLDER: " attr(data-placeholder);
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-block-start: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  white-space: nowrap;
  direction: ltr;
  pointer-events: none;
}

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