/* ============================================================
   WijiBoard — Design Tokens, Reset & Typography
   web/styles/base.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:           #0d0f14;
  --surface:      #161923;
  --surface-2:    #1e2330;
  --surface-3:    #252a3a;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);

  /* Accent palette */
  --accent-blue:   #448aff;
  --accent-green:  #00e676;
  --accent-red:    #ff5252;
  --accent-amber:  #ffca28;
  --accent-purple: #e040fb;

  /* Text */
  --text-primary:   #e8eaf0;
  --text-secondary: #a0a8bc;
  --text-muted:     #6c7385;

  /* Glow effects */
  --glow-blue:   0 0 28px rgba(68,  138, 255, 0.45);
  --glow-green:  0 0 28px rgba(0,   230, 118, 0.50);
  --glow-red:    0 0 28px rgba(255,  82,  82, 0.38);
  --glow-amber:  0 0 20px rgba(255, 202,  40, 0.40);

  /* Layout */
  --sidebar-width:    240px;
  --topbar-height:    60px;
  --content-padding:  24px;

  /* Shape */
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;

  /* Motion */
  --transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ambient background glow */
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%,  rgba(68, 138, 255, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 80%,  rgba(0,  230, 118, 0.06) 0%, transparent 60%);
}

/* ── Typography scale ───────────────────────────────────────── */
h1 { font-size: 1.6rem;  font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;  line-height: 1.3; }
h3 { font-size: 1rem;    font-weight: 600; letter-spacing: -0.01em;  }
h4 { font-size: 0.875rem;font-weight: 600; }

p  { color: var(--text-secondary); line-height: 1.7; }
a  { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: 0.75rem; color: var(--text-muted); }

/* ── Utility: visually hidden ───────────────────────────────── */
.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;
}

/* ── Utility: scrollbars ────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
*::-webkit-scrollbar          { width: 5px; height: 5px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: var(--surface-3); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--surface-2); }

/* ── Utility: spinner ───────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

/* ── Utility: pulse ─────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Utility: fade-in ───────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s var(--transition) both; }