/* ============================================================
   BASE — reset, page shell, typography utilities, helpers
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:var(--page);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .25s var(--ease),color .25s var(--ease);
}
[dir="rtl"] body{font-family:var(--font-ar)}

button{font-family:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block}
::selection{background:var(--accent-soft)}

/* ambient page glow (approximates the kit's ambient background image) */
.ambient{position:relative;isolation:isolate}
.ambient::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 82% -8%, var(--glow), transparent 60%),
    radial-gradient(90% 60% at 0% 108%, var(--glow), transparent 55%);
  opacity:.7;
}

/* scrollbars — minimal, floating (Claude-style): thin translucent pill, no track */
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent;border:0}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px;border:3px solid transparent;background-clip:padding-box;min-height:36px;transition:background .15s}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-corner{background:transparent}
.scroll{overflow:auto}

/* ---- TYPE SCALE (exact Figma text styles) ---- */
.t-h1{font-weight:800;font-size:48px;line-height:48px;letter-spacing:-.012em}
.t-h2{font-weight:600;font-size:30px;line-height:36px;letter-spacing:-.0075em}
.t-h3{font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.006em}
.t-h4{font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.005em}
.t-4xl{font-size:36px;line-height:40px}
.t-3xl{font-size:30px;line-height:36px}
.t-2xl{font-size:24px;line-height:32px}
.t-xl{font-size:20px;line-height:28px}
.t-lg{font-size:18px;line-height:28px}
.t-base{font-size:16px;line-height:24px}
.t-sm{font-size:14px;line-height:20px}
.t-xs{font-size:12px;line-height:16px}
.fw-r{font-weight:400}.fw-m{font-weight:500}.fw-sb{font-weight:600}.fw-b{font-weight:700}.fw-xb{font-weight:800}
.mono{font-family:var(--font-mono)}
.upper{text-transform:uppercase;letter-spacing:.04em}

/* Arabic taller leading (ar/* styles) */
[dir="rtl"] .t-sm{line-height:22px}
[dir="rtl"] .t-base{line-height:26px}
[dir="rtl"] .t-lg{line-height:30px}
[dir="rtl"] .t-xl{line-height:32px}
[dir="rtl"] .t-2xl{line-height:36px}
[dir="rtl"] .t-h3{line-height:36px}
[dir="rtl"] .t-h4{line-height:32px}
/* numerals stay LTR inside RTL */
.num{direction:ltr;unicode-bidi:isolate;font-family:var(--font-sans);font-weight:600}

/* ---- colour helpers ---- */
.c-primary{color:var(--text-primary)}.c-secondary{color:var(--text-secondary)}
.c-muted{color:var(--text-muted)}.c-faint{color:var(--text-faint)}
.c-accent{color:var(--accent)}.c-success{color:var(--success)}
.c-warning{color:var(--warning)}.c-danger{color:var(--danger)}

/* ---- layout helpers ---- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.between{justify-content:space-between}
.center{align-items:center;justify-content:center}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.hidden{display:none!important}