/* ============================================================
   DocHub — theme.css  (Light Theme)
   Overrides the dark design tokens in main.css.
   Load this AFTER main.css in the HTML head.
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --bg-0:        #f4f5fa;
  --bg-1:        #f9f9fd;
  --bg-2:        #ffffff;
  --bg-3:        #f0f1f8;
  --surface-1:   #eef0f9;
  --surface-2:   #e4e6f4;
  --surface-3:   #d0d4ea;

  /* ── Brand (keep indigo, just lighten the tints) ── */
  --indigo:      #6757e8;
  --indigo-hi:   #5546d6;
  --indigo-lo:   rgba(103,87,232,0.10);
  --indigo-glow: rgba(103,87,232,0.20);
  --grad:        linear-gradient(135deg, #6757e8 0%, #8b7cf5 100%);
  --grad-hero:   radial-gradient(ellipse 70% 50% at 50% -10%, rgba(103,87,232,0.10) 0%, transparent 70%);

  /* ── Text ── */
  --text-1:      #13152b;
  --text-2:      #4a4f70;
  --text-3:      #9298b8;

  /* ── Borders ── */
  --border-1:    rgba(0,0,0,0.08);
  --border-2:    rgba(0,0,0,0.15);

  /* ── Status (slightly deepened for light bg readability) ── */
  --green:       #1a9e6a;
  --red:         #d94055;
  --yellow:      #c89c10;
  --blue:        #2878d6;

  /* ── Shadows (lighter) ── */
  --shadow-glow: 0 0 24px rgba(103,87,232,0.18);
  --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
  --shadow-modal: 0 16px 64px rgba(0,0,0,0.18);
}

/* ── Body background & text ── */
body {
  background: var(--bg-0);
  color: var(--text-1);
}

/* ── Topbar glass — light version ── */
.topbar {
  background: rgba(244,245,250,0.90);
}

/* ── Landing nav glass ── */
.land-nav {
  background: rgba(244,245,250,0.90);
}

/* ── Auth screen grid texture darkens on light bg — tone it down ── */
#auth-screen::after {
  opacity: 0.5;
}

/* ── Scrollbar thumb ── */
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
}

/* ── Sidebar ── */
.sidebar {
  background: var(--bg-1);
  border-right-color: var(--border-1);
}

/* ── Demo user button flash — use a lighter tint on light theme ── */
/* (handled inline via JS; no override needed) */

/* ── Input / select placeholder ── */
::placeholder {
  color: var(--text-3);
  opacity: 1;
}