/* ============================================================
   SMU Student Portal — Base styles
   Reset + base elements + typography + layout primitives + utilities
   Depends on tokens.css. Uses var(--x) only — no raw colors.
   ============================================================ */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; font-size:16px; scroll-behavior:smooth; }
body {
  font-family:var(--font-en);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,svg,canvas { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:color-mix(in srgb, var(--primary) 25%, transparent); }

/* ---- Bengali ---- */
[lang="bn"], .bn { font-family:var(--font-bn); }

/* ---- Typography scale ---- */
h1,.h1 { font-size:1.5rem;  font-weight:700; line-height:1.2; letter-spacing:-.01em; }
h2,.h2 { font-size:1.25rem; font-weight:600; line-height:1.25; }
h3,.h3 { font-size:1.05rem; font-weight:600; line-height:1.3; }
h4,.h4 { font-size:.92rem;  font-weight:600; }
.display { font-size:2rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
small,.small { font-size:.8rem; }
.xs { font-size:.72rem; }
.muted { color:var(--text-muted); }
.subtle { color:var(--text-subtle); }
.strong { font-weight:600; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---- Layout primitives ---- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s5); }
.stack > * + * { margin-top:var(--gap, var(--s4)); }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap, var(--s3)); }
.between { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.grid { display:grid; gap:var(--gap, var(--s4)); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width:900px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* gap helpers */
.g1{--gap:var(--s1)}.g2{--gap:var(--s2)}.g3{--gap:var(--s3)}.g4{--gap:var(--s4)}.g5{--gap:var(--s5)}.g6{--gap:var(--s6)}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}
.flex-1{flex:1}.wrap{flex-wrap:wrap}.center{align-items:center}.ml-auto{margin-left:auto}

/* ---- Accessibility ---- */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Divider ---- */
hr,.divider { border:0; border-top:1px solid var(--border); margin-block:var(--s4); }

/* ---- Page scaffold (used inside the app shell main area) ---- */
.page { padding:var(--s5); max-width:var(--maxw); margin-inline:auto; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5); }
.page-head h1 { margin-bottom:.15rem; }
.page-head .sub { color:var(--text-muted); font-size:.85rem; }

/* ---- Public layout (no sidebar: landing, login, signup, verify, notices, help) ---- */
.pub-bar { display:flex; align-items:center; gap:.6rem; padding:.6rem var(--s5); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.pub-bar .brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--text); }
.pub-bar .brand:hover { text-decoration:none; }
.pub-bar .brand img { width:30px; height:30px; }
.pub-bar .spacer { flex:1; }
.pub-main { max-width:var(--maxw); margin-inline:auto; padding:var(--s6) var(--s5); }
.pub-narrow { max-width:460px; margin-inline:auto; }
.pub-hero { padding:var(--s8) 0; }

/* ---- Interaction & motion polish (Web Interface Guidelines) ---- */
a, button, .btn, .iconbtn, .nav-item, .tab, [data-action], summary,
label.checkbox, label.radio, .step-card, .role-card, .card {
  touch-action: manipulation;                 /* removes the 300ms double-tap delay on mobile */
  -webkit-tap-highlight-color: transparent;   /* no grey flash on tap */
}
.mono, .stat__value { font-variant-numeric: tabular-nums; }
.emo-ico { display:inline-flex; align-items:center; vertical-align:-0.14em; }
.emo-ico svg { width:1.05em; height:1.05em; }
/* Theme toggle renders a moon/sun line-icon (not an emoji) on every page */
[data-theme-label] { display:inline-flex; align-items:center; }
[data-theme-label] svg { width:18px; height:18px; }

/* Subtle, refined page entrance — one reveal, not scattered micro-animations */
@keyframes smu-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.page, .pub-main, .hub-wrap { animation: smu-rise .32s ease both; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}