/* ============================================================
   YAFNAH — CRAFT FLOOR
   The parts of an interface nobody names but everybody feels.
   Loaded after tokens.css by the elevated variants.
   ============================================================ */

:root{
  /* Strong curves. The built-in CSS easings are too weak to read as
     intentional — these move immediately, which is what makes a
     control feel like it heard you. */
  --out:  cubic-bezier(.23, 1, .32, 1);
  --both: cubic-bezier(.77, 0, .175, 1);
  --draw: cubic-bezier(.32, .72, 0, 1);

  /* Durations. UI stays under 300ms; only the authored moment runs long. */
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-enter: 260ms;
  --t-piece: 720ms;
}

/* ── Browser surfaces ──────────────────────────────────────────
   Selection, caret, scrollbar and underline all ship with defaults
   that belong to no design system. Theme them. ── */
::selection{background:var(--ghaf);color:var(--rimal)}
::-moz-selection{background:var(--ghaf);color:var(--rimal)}
html{caret-color:var(--ghaf);scrollbar-color:var(--t40) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t40);border:3px solid var(--t06);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--t60)}
a{text-underline-offset:.22em;text-decoration-thickness:from-font}

/* Figures line up in columns without the eye doing arithmetic. */
[data-num],.num-tab,table td,output{font-variant-numeric:tabular-nums lining-nums}

/* Focus that belongs to the palette, and only for keyboards. */
:focus-visible{outline:2px solid var(--ghaf);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ── Press ─────────────────────────────────────────────────────
   Every pressable thing answers. Subtle — 0.97, not a bounce. ── */
button,[role="button"],a.press,.press{
  transition:transform var(--t-press) var(--out);
}
button:active,[role="button"]:active,a.press:active,.press:active{
  transform:scale(.97);
}

/* ── Hover is a pointer thing ──────────────────────────────────
   A tap fires :hover on touch and leaves the state stuck. ── */
@media (hover:none){
  *:hover{transition-duration:0ms!important}
}

/* ── Reduced motion keeps meaning, drops movement ─────────────
   Not "no animation" — colour and opacity still explain state. ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  button:active,.press:active{transform:none}
}

/* ── Type discipline ──────────────────────────────────────────
   Display never exceeds 6rem; tracking never looser than -.04em
   at display sizes; running text stays inside a readable measure. ── */
.measure{max-width:68ch}
.display-xl{
  font-size:clamp(2.25rem, 6.4vw, 6rem);
  letter-spacing:-.04em;line-height:.96;font-weight:200;text-wrap:balance;
}
.display-l{
  font-size:clamp(1.75rem, 4.2vw, 3.5rem);
  letter-spacing:-.032em;line-height:1.04;font-weight:200;text-wrap:balance;
}
html[lang="ar"] .display-xl,html[lang="ar"] .display-l{
  letter-spacing:0;line-height:1.24;font-weight:300;
}