/* ============================================================
   assets/css/base.css
   Variables, reset, typography. Import first.
   ============================================================ */

:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dim:    rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.25);
  --black:       #060606;
  --surface:     #0D0D0D;
  --surface2:    #131313;
  --surface3:    #1A1A1A;
  --surface4:    #222222;
  --white:       #F5F2EE;
  --white-dim:   rgba(245,242,238,0.55);
  --white-faint: rgba(245,242,238,0.06);
  --text-dim: rgba(245, 242, 238, 0.4);
  --text-faint: rgba(245, 242, 238, 0.25);
  
  --border:      rgba(245,242,238,0.07);
  --border2:     rgba(245,242,238,0.12);
  --success:     #27AE60;
  --error:       #E74C3C;
  --info:        #2E86C1;
  --warning:     #F39C12;
  --sidebar-w:   260px;
}

/* Light mode token overrides */
body.light {
  --black:       #F0EDE8;
  --surface:     #FFFFFF;
  --surface2:    #F5F2EE;
  --surface3:    #EAE6E0;
  --surface4:    #DEDAD3;
  --white:       #1A1612;
  --white-dim:   rgba(26,22,18,0.6);
  --white-faint: rgba(26,22,18,0.05);
  --text-dim: rgba(26, 22, 18, 0.5);
  --text-faint: rgba(26, 22, 18, 0.3);
  --border:      rgba(26,22,18,0.09);
  --border2:     rgba(26,22,18,0.14);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img, svg { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }
a { color:inherit; }
ul, ol { list-style:none; }

/* ─── Typography ─── */
h1,h2,h3,h4,h5,h6 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  line-height:1.2;
  color:var(--white);
}
h1 { font-size:clamp(28px,4vw,48px); }
h2 { font-size:clamp(22px,3vw,32px); }
h3 { font-size:clamp(18px,2.5vw,24px); }

code, .mono { font-family:'Space Mono',monospace; }

/* ─── Scrollbar ─── */
* { scrollbar-width:thin; scrollbar-color:rgba(201,168,76,0.15) transparent; }
*::-webkit-scrollbar { width:4px; height:4px; }
*::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.15); border-radius:2px; }
*::-webkit-scrollbar-track { background:transparent; }

/* ─── Theme transition ─── */
body, .sidebar, .topbar, .card, .modal-box, input, select, textarea, button {
  transition: background-color 0.25s ease, border-color 0.2s ease;
}
/* Don't transition transforms/opacity (breaks animations) */
.skeleton, [style*="transform"], [style*="opacity"] { transition: none !important; }