/* ==========================================================================
   نومين للمقاولات العامة — Nomen General Contracting
   base.css — التوكنز والخطوط والأساسيات
   Design tokens, reset and typography.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — black and white only */
  --paper:        #ffffff;
  --ink:          #0a0a0a;
  --graphite:     #111111;
  --ash:          #6e6e6e;
  --ash-soft:     #a2a2a2;
  --rule:         #e6e6e6;
  --rule-strong:  #cfcfcf;
  --rule-dark:    #262626;

  /* Semantic surface tokens — flipped inside .band--dark */
  --surface:      var(--paper);
  --on-surface:   var(--ink);
  --on-surface-2: var(--ash);
  --hairline:     var(--rule);

  /* Type scale */
  --step--2: clamp(0.66rem, 0.64rem + 0.10vw, 0.72rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.03rem);
  --step-1:  clamp(1.10rem, 1.03rem + 0.34vw, 1.32rem);
  --step-2:  clamp(1.40rem, 1.20rem + 0.90vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.40rem + 2.10vw, 3.10rem);
  --step-4:  clamp(2.45rem, 1.55rem + 4.10vw, 5.00rem);
  --step-5:  clamp(2.90rem, 1.45rem + 6.40vw, 7.00rem);

  /* Spacing */
  --gap-xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Layout */
  --rail: 0px;
  --shell: 1480px;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1100px) {
  :root { --rail: 34px; --header-h: 84px; }
}

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 24px);
}

body {
  font-family: "Alexandria", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  padding-inline-start: var(--rail);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

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

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */
.display {
  font-weight: 200;
  line-height: 1.26;
  letter-spacing: -0.005em;
}

:root[lang="en"] .display { line-height: 1.04; letter-spacing: -0.025em; }

.display--xl { font-size: var(--step-5); }
.display--lg { font-size: var(--step-4); }
.display--md { font-size: var(--step-3); }
.display--sm { font-size: var(--step-2); }

/* Small technical label — codes, keys, captions */
.label {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--on-surface-2);
}

:root[lang="en"] .label { text-transform: uppercase; }

.label--ink { color: var(--on-surface); }

.lede {
  font-size: var(--step-1);
  font-weight: 200;
  line-height: 1.8;
  max-inline-size: 60ch;
}

.body-text {
  color: var(--on-surface-2);
  max-inline-size: 64ch;
}

.text-muted { color: var(--on-surface-2); }

.num { font-variant-numeric: tabular-nums; }

/* أرقام مركّبة مثل «٠٣ / ٠٨» تُعرض دائمًا من اليسار لليمين
   Compound figures such as "03 / 08" always read left to right. */
.num.ltr { direction: ltr; unicode-bidi: bidi-override; }

/* Latin fragments inside Arabic copy keep their own direction */
.ltr { direction: ltr; unicode-bidi: isolate; }

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

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translateY(0); }