/* =====================================================
   BASE.CSS — Variables, Reset, Typography, Animations
   QAY Cloud Professional Neobrutalism UI System
   ===================================================== */

:root {
  /* Canvas & Surfaces */
  --canvas:       #F5F0E8;
  --surface:      #FFFFFF;
  --surface-alt:  #FAF8F4;
  --surface-deep: #1A1A2E;

  /* Core Borders & Shadows */
  --ink:          #000000;
  --ink-soft:     #1C1C1C;
  --border:       2px solid #000;
  --border-thick: 3px solid #000;
  --shadow-sm:    3px 3px 0 #000;
  --shadow-md:    4px 4px 0 #000;
  --shadow-lg:    6px 6px 0 #000;
  --shadow-xl:    8px 8px 0 #000;

  /* Accent Palette — warm & eye-pleasing */
  --yellow:  #F5C842;
  --yellow-lt: #FDF3C0;
  --cyan:    #3BBFBF;
  --cyan-lt: #D0F0F0;
  --coral:   #F26B5B;
  --coral-lt:#FDDDD9;
  --lime:    #6BBF5E;
  --lime-lt: #DAFAD6;
  --purple:  #9B72CF;
  --purple-lt:#EDE4FF;
  --blue:    #4A8FE7;
  --blue-lt: #D6E8FF;
  --orange:  #F59C42;
  --orange-lt:#FEE8C8;

  /* Sidebar */
  --sidebar-bg:   #1A1A2E;
  --sidebar-w:    240px;
  --sidebar-text: #C8C8DE;
  --sidebar-muted:#7A7A9A;

  /* Text */
  --txt-primary:  #111111;
  --txt-secondary:#555555;
  --txt-muted:    #888888;
  --txt-inverse:  #FFFFFF;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Dimensions */
  --topbar-h:  58px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  background-color: var(--canvas);
  background-image: radial-gradient(circle, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--txt-primary);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--canvas); }
::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover { background:var(--cyan); }

::selection { background:var(--yellow); color:var(--ink); }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { font-weight:800; letter-spacing:-0.02em; line-height:1.2; color:var(--txt-primary); }
h1 { font-size:1.85rem; }
h2 { font-size:1.4rem; }
h3 { font-size:1.1rem; }
h4 { font-size:0.95rem; }
a  { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--font); border:none; background:none; }
input, select, textarea { font-family:var(--font); }
ul,ol { list-style:none; }
mark { background:var(--yellow); color:var(--ink); padding:0 2px; border-radius:2px; }

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes popIn {
  from { opacity:0; transform:scale(0.94) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

@keyframes barStripe {
  from { background-position:0 0; }
  to   { background-position:30px 0; }
}

@keyframes pulseDot {
  0%,100% { transform:scale(0.9); opacity:0.8; }
  50%      { transform:scale(1.2); opacity:1; }
}

@keyframes toastIn {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes modalIn {
  from { opacity:0; transform:scale(0.92) translateY(-16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

/* ---- Page Transitions ---- */
.page { display:none; }
.page.active {
  display:block;
  animation: fadeUp 0.3s var(--ease-out);
}