/* Base + utilities (edge-to-edge, AUTH-SAFE) */
/* ——————————————————————————————————————————————————————————— */
/* Resets (safe globally) */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0} /* no global font/color here -> auth stays pristine */
img,svg,video{max-width:100%; height:auto; vertical-align:middle}

/* Links (neutral globally; AppShell will scope its own later) */
a{color:inherit; text-decoration:none}

/* Screen helpers */
.full-height{min-height:100dvh}
.visually-hidden,.sr-only{
  position:absolute!important;clip:rect(1px,1px,1px,1px)!important;
  padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important
}

/* Layout helpers (no implicit page gutters) */
.container{
  /* Edge-to-edge by default; only constrains max width if you use it */
  width:min(100%, var(--wrap-max, 1280px));
  margin-inline:auto;
}
/* Opt-in gutters (use only where you want side padding) */
.container--gutters{ padding-inline: 1rem }
@media (min-width: 768px){ .container--gutters{ padding-inline: 1.5rem } }
@media (min-width: 1200px){ .container--gutters{ padding-inline: 2rem } }

.container--narrow{ width:min(100%, var(--wrap, 860px)); margin-inline:auto }
.container--wide{ width:min(100%, var(--wrap-wide, 1440px)); margin-inline:auto }

/* Utility stacks/clusters/grids (no margins applied to the page itself) */
.stack > * + *{ margin-top: var(--space-3, 12px) }
.cluster{ display:flex; flex-wrap:wrap; gap: var(--space-2, 8px); align-items:center }
.auto-grid{
  display:grid; gap: var(--space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
}

/* ——————————————————————————————————————————————————————————— */
/* AppShell-only typography & focus (won’t touch auth/home unless scoped) */
body.i2s-app, .i2s-app{
  font-family: var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--text, #ecf1fb);
  background: var(--bg, #0b0f1a);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.i2s-app h1{font-size:var(--fs-900, 2rem); line-height:1.08; margin:0 0 var(--space-4,16px)}
.i2s-app h2{font-size:var(--fs-800, 1.6rem); line-height:1.12; margin:0 0 var(--space-3,12px)}
.i2s-app h3{font-size:var(--fs-700, 1.25rem); line-height:1.20; margin:0 0 var(--space-3,12px)}
.i2s-app p {font-size:var(--fs-400, 1rem); margin:0 0 var(--space-3,12px)}

.i2s-app a:focus-visible,
.i2s-app button:focus-visible,
.i2s-app [role="button"]:focus-visible,
.i2s-app input:focus-visible,
.i2s-app select:focus-visible,
.i2s-app textarea:focus-visible{
  outline:2px solid var(--accent, #F15A24); outline-offset:2px;
}