/**
 * base.css — CSS custom properties (design tokens) and global resets.
 * Every other stylesheet depends on these variables.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ─── Light theme (default) ─── */
:root,
[data-theme="light"] {
  --bg:          #f4f2ee;
  --bg2:         #fff;
  --bg3:         #ece9e2;
  --bg-h:        #e2dfd8;
  --text:        #1a1d26;
  --text2:       #4a5068;
  --text3:       #565d72;
  --border:      #ddd9d0;
  --border2:     #ccc8bf;
  --accent:      #b8860b;
  --accent2:     #d4a017;
  --accent-bg:   rgba(184, 134, 11, 0.07);
  --accent-glow: rgba(184, 134, 11, 0.14);
  --danger:      #d93025;
  --success:     #1a8754;
  --blue:        #3b6fd4;
  --sh:          0 1px 3px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.03);
  --sh2:         0 4px 20px rgba(0,0,0,0.07);
  --modal-bg:    #fff;
  --sidebar-bg:  #fff;
  --input-bg:    #f4f2ee;
}

/* ─── Dark theme ─── */
[data-theme="dark"] {
  --bg:          #0f1117;
  --bg2:         #1a1d28;
  --bg3:         #232735;
  --bg-h:        #2d3143;
  --text:        #e8eaf0;
  --text2:       #a0a8be;
  --text3:       #6b7394;
  --border:      #2d3143;
  --border2:     #3a3f55;
  --accent:      #d4a017;
  --accent2:     #e8b830;
  --accent-bg:   rgba(212, 160, 23, 0.1);
  --accent-glow: rgba(212, 160, 23, 0.18);
  --danger:      #f87171;
  --success:     #34d399;
  --blue:        #60a5fa;
  --sh:          0 1px 4px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.15);
  --sh2:         0 8px 32px rgba(0,0,0,0.25);
  --modal-bg:    #1a1d28;
  --sidebar-bg:  #13151e;
  --input-bg:    #232735;
}

/* ─── Global reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

/* ─── Utility colour helpers ─── */
.accent     { color: var(--accent) !important; }
.text-muted { color: var(--text3)  !important; }

/* ─── Print: hide modal chrome ─── */
@media print {
  .modal-header,
  .modal-footer { display: none !important; }
  .modal-content { border: none !important; box-shadow: none !important; }
}