/* ═══════════════════════════════════════════════
   CODESTASH — tokens.css
   Neubrutalism Design System
   Dark: Warm Charcoal + Electric Yellow
   Light: Parchment + Burnt Coral
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --bg:        #F5EFD8;
  --surface:   #FDFAF0;
  --surface2:  #EDE8D0;
  --surface3:  #E2DCCA;
  --border:    #1A1A14;
  --border-hi: #000000;
  --text:      #1A1A14;
  --muted:     rgba(26, 26, 20, 0.5);
  --muted2:    rgba(26, 26, 20, 0.28);
  --danger:    #E3000F;
  --success:   #008A48;
  --warning:   #C07800;
  --accent:    #FF4500;
  --admin:     #9B00D4;

  --nb-shadow-sm:     3px 3px 0px #1A1A14;
  --nb-shadow-md:     4px 4px 0px #1A1A14;
  --nb-shadow-lg:     6px 6px 0px #1A1A14;
  --nb-shadow-accent: 4px 4px 0px #FF4500;
  --nb-border:        2px solid #1A1A14;
  --nb-border-hi:     2px solid #000000;

  --font-display: 'Space Grotesk', 'DM Sans', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --theme-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ══ LIGHT MODE ══ */
[data-theme="dark"] {
  --bg:        #0F0F0C;
  --surface:   #1B1B17;
  --surface2:  #252520;
  --surface3:  #2E2E28;
  --border:    #3C3C34;
  --border-hi: #F2EDD0;
  --text:      #F2EDD0;
  --muted:     rgba(242, 237, 208, 0.5);
  --muted2:    rgba(242, 237, 208, 0.25);
  --danger:    #FF3B3B;
  --success:   #2FD675;
  --warning:   #FFD93D;
  --accent:    #FFD93D;
  --admin:     #FF6BFF;

  --nb-shadow-sm:     3px 3px 0px #F2EDD0;
  --nb-shadow-md:     4px 4px 0px #F2EDD0;
  --nb-shadow-lg:     6px 6px 0px #F2EDD0;
  --nb-shadow-accent: 4px 4px 0px #FFD93D;
  --nb-border:        2px solid #F2EDD0;
  --nb-border-hi:     2px solid #F2EDD0;
}

/* ── Light mode specific overrides ── */
/* Dark mode specific overrides */
[data-theme="dark"] body::before { opacity: 0.5; }
[data-theme="dark"] .logo-mark { background: #FFD93D; }
[data-theme="dark"] .logo-mark svg path,
[data-theme="dark"] .logo-mark svg line { stroke: #0F0F0C; }
[data-theme="dark"] .auth-card,
[data-theme="dark"] .pending-card { box-shadow: 10px 10px 0px #F2EDD0; }
[data-theme="dark"] .code-preview { background: var(--surface2) !important; }
[data-theme="dark"] .hljs { background: var(--surface2) !important; color: #F2EDD0; }
[data-theme="dark"] #hljs-theme-light { display: none; }

/* ── Transitions ── */
body, .sidebar, .topbar, .auth-card, .pending-card, .add-panel,
.snippet-card, .code-preview, .field-input, .btn-primary, .btn-ghost,
.btn-save, .nav-item, .tag-input-wrap, .cb-card, .account-dropdown,
.share-modal, .toast, .admin-header, .admin-body, .stat-card,
.user-card, .lock-card, .cb-otp-result, .cb-retrieved, .notes-editor-wrap,
.notes-toolbar { transition: var(--theme-transition); }