/* ────────────────────────────────────────────────────────────
   OH-Previews — Theme (dark default, .light-mode override)
   Loaded first so main.css and admin.css can use these vars.
   ──────────────────────────────────────────────────────────── */

/* ── Dark mode (default) ─────────────────────────────────── */
:root {
  --bg:            #121214;
  --surface:       #1A1A1E;
  --text:          #F8FAFD;
  --text-muted:    rgba(248,250,253,.55);
  --text-faint:    rgba(248,250,253,.32);
  --btn:           rgba(255,255,255,.08);
  --btn-hover:     rgba(255,255,255,.14);
  --border:        rgba(255,255,255,.07);
  --border-light:  rgba(255,255,255,.05);

  /* Accent — used for primary buttons, active tags */
  --accent:        #F8FAFD;
  --accent-fg:     #121214;   /* text ON accent bg */
  --accent-hover:  #d8dce6;

  /* Logo mark always has a fixed dark bg */
  --logo-bg:       #18181C;

  /* Status colours */
  --selected:      #16A34A;
  --selected-bg:   rgba(22,163,74,.15);
  --rejected:      #6B7280;
  --pin:           #EF4444;
  --pin-new:       #0EA5E9;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.5);
  --shadow:        0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.75);

  /* ── Component tokens ────────────────────────────────── */
  --topbar-bg:         rgba(18,18,20,.92);
  --badge-green-bg:    rgba(22,163,74,.15);
  --badge-green-text:  #86efac;
  --badge-blue-bg:     rgba(14,165,233,.15);
  --badge-blue-text:   #7dd3fc;
  --badge-red-bg:      rgba(239,68,68,.15);
  --badge-red-text:    #fca5a5;
  --btn-danger-bg:     rgba(239,68,68,.14);
  --btn-danger-text:   #fca5a5;
  --btn-danger-hover:  rgba(239,68,68,.24);
  --share-banner-bg:   rgba(22,163,74,.1);
  --share-banner-bd:   rgba(22,163,74,.3);
  --share-banner-text: #86efac;
  --login-blob:        rgba(255,255,255,.03);
  --login-error-bg:    rgba(239,68,68,.15);
  --login-error-text:  #fca5a5;
  --proj-thumb-bg:     linear-gradient(135deg, #1a1a1f, #222228);
  --loading-overlay:   rgba(18,18,20,.85);
  --selection-border:  #FFFFFF;
  --toggle-on:         rgba(255,255,255,0.45);
  --toggle-off:        rgba(255,255,255,0.15);
  --toggle-border:     rgba(255,255,255,0.25);
  --surface-overlay:   rgba(18,18,20,.72);

  /* ── Lightbox tokens ─────────────────────────────────── */
  --lb-bg:          #121214;
  --lb-sidebar-bg:  #1A1A1E;
  --lb-border:      rgba(255,255,255,0.07);
  --lb-text:        rgba(255,255,255,0.8);
  --lb-text-muted:  rgba(255,255,255,0.4);
  --lb-btn-bg:      rgba(255,255,255,0.08);
  --lb-btn-hover:   rgba(255,255,255,0.14);
  --lb-input-bg:    rgba(255,255,255,0.07);
  --lb-ft-bg:       #1C2433;
}

/* ── Light mode ──────────────────────────────────────────── */
.light-mode {
  --bg:            #F8FAFD;
  --surface:       #FFFFFF;
  --text:          #121214;
  --text-muted:    #6B7280;
  --text-faint:    #9CA3AF;
  --btn:           #E9EDF4;
  --btn-hover:     #C9D4E3;
  --border:        #E2E8F0;
  --border-light:  #EEF2F7;
  --accent:        #121214;
  --accent-fg:     #ffffff;
  --accent-hover:  #2a2a2e;
  --selected-bg:   #DCFCE7;
  --shadow-sm:     0 1px 3px rgba(18,18,20,.06), 0 1px 2px rgba(18,18,20,.04);
  --shadow:        0 4px 16px rgba(18,18,20,.08), 0 2px 6px rgba(18,18,20,.04);
  --shadow-lg:     0 12px 40px rgba(18,18,20,.14), 0 4px 12px rgba(18,18,20,.06);
  --topbar-bg:     rgba(248,250,253,.9);
  --badge-green-bg:    #DCFCE7;
  --badge-green-text:  #15803D;
  --badge-blue-bg:     #DBEAFE;
  --badge-blue-text:   #1D4ED8;
  --badge-red-bg:      #FEE2E2;
  --badge-red-text:    #DC2626;
  --btn-danger-bg:     #FEE2E2;
  --btn-danger-text:   #DC2626;
  --btn-danger-hover:  #FECACA;
  --share-banner-bg:   #F0FDF4;
  --share-banner-bd:   #BBF7D0;
  --share-banner-text: #15803D;
  --login-blob:        #E9EDF4;
  --login-error-bg:    #FEE2E2;
  --login-error-text:  #DC2626;
  --proj-thumb-bg:     linear-gradient(135deg, #E2E8F0, #CBD5E1);
  --loading-overlay:   rgba(248,250,253,.8);
  --selection-border:  #121214;
  --toggle-on:         #6B7280;
  --toggle-off:        #CBD5E1;
  --toggle-border:     transparent;
  --surface-overlay:   rgba(248,250,253,.88);

  /* ── Lightbox tokens ─────────────────────────────────── */
  --lb-bg:          #F8FAFD;
  --lb-sidebar-bg:  #FFFFFF;
  --lb-border:      #E2E8F0;
  --lb-text:        #121214;
  --lb-text-muted:  #6B7280;
  --lb-btn-bg:      #E9EDF4;
  --lb-btn-hover:   #C9D4E3;
  --lb-input-bg:    #F1F5F9;
  --lb-ft-bg:       #E2E8F0;
}

/* ── Theme transition ─────────────────────────────────────── */
html {
  color-scheme: dark;
}
html.light-mode {
  color-scheme: light;
}
body,
.topbar, .sidebar, .main-area,
.project-card, .modal, .surface,
.login-screen, .login-card,
.nav-item, .tab-btn, .feedback-card {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}