/* =====================================================================
   TPCloud Object Storage Portal — Design System v2
   base.css: Design tokens, reset, base element styles
   ===================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Sidebar */
  --nav-bg:        #0c1526;
  --nav-border:    rgba(255,255,255,0.06);
  --nav-item:      #aab2c2;
  --nav-hover-bg:  rgba(255,255,255,0.07);
  --nav-hover:     rgba(255,255,255,0.85);
  --nav-active-bg: #2563eb;
  --nav-active:    #ffffff;
  --nav-label:     rgba(255,255,255,0.28);
  --brand-icon-bg: #2563eb;

  /* Surface */
  --bg:      #f4f5f7;
  --surface: #fff;
  --surface2: #fafbfc;
  --hover-bg: #f3f4f6;

  /* Border */
  --border:     #e6e8ec;
  --border-med: #d0d5de;

  /* Text */
  --text:       #16191f;
  --text-sec:   #5b6470;
  --text-muted: #8a929e;
  --text-faint: #c4c9d1;

  /* Brand */
  --brand:      #2563eb;
  --brand-dark: #1f57d6;
  --brand-bg:   #eff6ff;

  /* Semantic — used ONLY for status/data, never decoration */
  --green:        #15a34a;
  --green-bg:     #f0fdf4;
  --green-border: #86efac;
  --green-dark:   #166534;

  --amber:        #c2792b;
  --amber-bg:     #fff7ed;
  --amber-border: #fed7aa;
  --amber-dark:   #9a3412;

  --red:          #c0432f;
  --red-bg:       #fff7f7;
  --red-border:   #fecaca;
  --red-dark:     #991b1b;

  --blue-bg:     #eff6ff;
  --blue-border: #bfdbfe;
  --blue-dark:   #1d4ed8;

  /* Radius */
  --r:    10px;   /* cards */
  --r-sm:  8px;  /* buttons / inputs */
  --r-lg: 14px;

  /* Shadows */
  --sh:    0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
  --sh-sm: 0 1px 2px rgba(15,23,42,0.06);
  --sh-lg: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.05);

  /* Sidebar width */
  --sb: 256px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; }