/* ============================================================
   /assets/css/root.css
   Tokens de design — Newpipe Portal
   ============================================================ */

:root {
  /* ── Brand ───────────────────────────────── */
  --np-red:          #C0151A;
  --np-red-dark:     #8B0000;
  --np-red-light:    #E8393E;
  --np-red-muted:    rgba(192, 21, 26, 0.12);
  --np-black:        #0D0D0D;
  --np-black-soft:   #1A1A1A;
  --np-silver:       #C0C0C0;
  --np-silver-light: #E8E8E8;

  /* ── Superfícies ─────────────────────────── */
  --np-bg:           #F2F2F2;
  --np-bg-soft:      #F8F8F8;
  --np-surface:      #FFFFFF;
  --np-surface-2:    #F5F5F5;

  /* ── Texto ───────────────────────────────── */
  --np-text:         #1A1A1A;
  --np-text-2:       #4A4A4A;
  --np-text-3:       #888888;
  --np-text-inv:     #FFFFFF;

  /* ── Bordas ──────────────────────────────── */
  --np-border:       #E0E0E0;
  --np-border-2:     #CCCCCC;

  /* ── Sidebar ─────────────────────────────── */
  --sb-bg:           #0D0D0D;
  --sb-w:            220px;
  --sb-w-collapsed:  60px;
  --sb-text:         #C0C0C0;
  --sb-text-active:  #F0F0F0;
  --sb-active-bg:    rgba(192, 21, 26, 0.18);
  --sb-active-border:#C0151A;
  --sb-hover-bg:     rgba(255,255,255,0.05);

  /* ── Topbar ──────────────────────────────── */
  --tb-h:            52px;
  --tb-bg:           #0D0D0D;
  --tb-border:       #C0151A;

  /* ── Feedback ────────────────────────────── */
  --np-success:      #16A34A;
  --np-success-bg:   #DCFCE7;
  --np-success-text: #166534;
  --np-warning:      #D97706;
  --np-warning-bg:   #FEF3C7;
  --np-warning-text: #92400E;
  --np-danger:       #DC2626;
  --np-danger-bg:    #FEE2E2;
  --np-danger-text:  #991B1B;
  --np-info-bg:      #DBEAFE;
  --np-info-text:    #1E40AF;

  /* ── Misc ────────────────────────────────── */
  --np-radius:       8px;
  --np-radius-lg:    12px;
  --np-radius-xl:    16px;
  --np-shadow:       0 2px 8px rgba(0,0,0,0.08);
  --np-shadow-md:    0 4px 16px rgba(0,0,0,0.12);
  --np-transition:   0.18s ease;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--np-text);
  background: var(--np-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--np-red); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

button { cursor: pointer; font-family: inherit; border: none; background: none; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--np-border-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--np-silver); }