/* =============================================================================
   AL-KINZ Internet — Base
   Modern reset, root typography, RTL-aware logical properties, a11y baseline.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
  scroll-behavior: smooth;
  font-variant-numeric: lining-nums;
}

html[lang="ar"] { font-family: var(--font-arabic); }
html[lang="ar"] body { letter-spacing: 0; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--glow-accent);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  transition: background-color var(--dur-3) var(--ease-standard),
              color var(--dur-3) var(--ease-standard);
}

/* Fine grain overlay for premium tactile depth (very subtle) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: var(--bg-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg:not(.chart-svg) { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}

:where(b, strong) { font-weight: var(--weight-bold); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Numeric figures: tabular, consistent width (IPs, money, counters) */
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------------------
   FOCUS — visible, accessible, ring-based
   -------------------------------------------------------------------------- */
:focus {
  outline: var(--ring-width) solid transparent;
  outline-offset: var(--ring-offset);
}
:focus-visible {
  outline-color: var(--accent);
  border-radius: var(--radius-xs);
}

/* #main (id="main", tabindex="-1") is only ever focused programmatically
   after a route change (app.js renderRoute), to announce navigation to
   screen readers - never reachable via real Tab navigation. Chromium still
   applies :focus-visible to script-focused non-interactive elements
   regardless of input modality, drawing a visible ring around the full
   content area on every navigation until the next click clears focus.
   Suppress it here specifically; screen readers still get the focus move. */
#main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   SELECTION
   -------------------------------------------------------------------------- */
::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   SCROLLBARS
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ---------------------------------------------------------------------------
   ACCESSIBILITY HELPERS
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  transform: translateY(-150%);
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-on);
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

[hidden] { display: none !important; }
[aria-busy="true"] { cursor: progress; }

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

/* ---------------------------------------------------------------------------
   NO-FOUC — hide app until theme/i18n booted (set on <html class="booting">)
   -------------------------------------------------------------------------- */
html.booting body { opacity: 0; }
body { opacity: 1; transition: opacity var(--dur-3) var(--ease-standard); }

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES (logical, RTL-safe)
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}
.cluster > * { min-inline-size: 0; }

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

[dir="rtl"] .rtl-flip { transform: scaleX(-1); }