/* ============================================================
   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)}

/* ---------- BROWSER AUTOFILL ----------
   Chrome paints its OWN background on a field it has autofilled, a blue-grey
   slab in dark mode, pale blue in light, and it is a UA style, so a plain
   `background` declaration never reaches it. That patch is not in the kit and
   it overrode the designed field on Sign in, Create account and every
   connection form, which is why it lands here in base.css beside ::selection:
   both are the same job, replacing a browser default with ours.

   Two techniques together, because Chrome has changed which one it honours:
   `background-clip:text` clips the UA fill to the glyphs, and the absurd
   transition delay means the animated fill never arrives in versions that
   still animate it. Neither costs anything if the other is the one working.

   The text colour has to be restated too. Chrome forces its own ink along with
   the background, and once the slab is gone that ink is near-invisible on our
   dark surface. -webkit-text-fill-color beats `color` on an autofilled field,
   so it is the one that has to carry it, with caret-color to match.

   Safe to apply to every input in the build: the visible fill always sits on
   the .input / .input--lg wrapper, never on the <input> itself, so there is no
   real background here for background-clip to eat. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:var(--text-primary);
  caret-color:var(--text-primary);
  transition:background-color 100000s ease-in-out 0s;
}

/* 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}