/* ============================================================
   ANTHELUS — Design Token System
   Day Mode + Night Mode (ChatGPT-style)
   ============================================================ */

/* ── Day Mode (Default) ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #FFFFFF;
  --bg-2:        #F6F8FC;
  --bg-3:        #EEF2FA;
  --bg-card:     #FFFFFF;
  --bg-input:    #F6F8FC;

  /* Text */
  --text:        #0F172A;
  --text-2:      #334155;
  --text-muted:  #64748B;
  --text-light:  #94A3B8;

  /* Border */
  --border:      #E2E8F0;
  --border-2:    #CBD5E1;

  /* Accent — use sparingly */
  --blue:        #1D4ED8;
  --blue-light:  #EFF6FF;
  --blue-mid:    #3B82F6;

  /* Freepko Colors */
  --fk-gold:     #C9820A;
  --fk-yellow:   #F59E0B;
  --fk-orange:   #EA580C;
  --fk-bg:       #FFF8ED;
  --fk-dark:     #1C0F00;

  /* Fronttext */
  --ft-accent:   #0EA5E9;
  --ft-bg:       #F0F9FF;

  /* Utility */
  --success:     #059669;
  --danger:      #DC2626;
  --warning:     #D97706;

  /* Radius */
  --r-sm:  6px;
  --r:     12px;
  --r-lg:  18px;
  --r-xl:  28px;

  /* Shadow */
  --sh-sm:  0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --sh:     0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --sh-lg:  0 12px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  --sh-xl:  0 24px 60px rgba(0,0,0,.12);

  /* Transition */
  --t: .22s ease;
  --t-slow: .4s ease;

  /* Nav */
  --nav-h: 64px;
  --sidebar-w: 260px;

  /* Font */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ── Night Mode (ChatGPT-style) ──────────────────────────── */
[data-theme="dark"] {
  --bg:          #212121;
  --bg-2:        #2A2A2A;
  --bg-3:        #333333;
  --bg-card:     #2A2A2A;
  --bg-input:    #333333;

  --text:        #ECECEC;
  --text-2:      #C2C2C2;
  --text-muted:  #8A8A8A;
  --text-light:  #5A5A5A;

  --border:      #3A3A3A;
  --border-2:    #484848;

  --blue:        #3B82F6;
  --blue-light:  #1E2A45;
  --blue-mid:    #60A5FA;

  --fk-gold:     #FBBF24;
  --fk-yellow:   #FCD34D;
  --fk-orange:   #FB923C;
  --fk-bg:       #1C1400;
  --fk-dark:     #FFF8ED;

  --ft-accent:   #38BDF8;
  --ft-bg:       #0C1929;

  --sh-sm:  0 1px 4px rgba(0,0,0,.3);
  --sh:     0 4px 16px rgba(0,0,0,.4);
  --sh-lg:  0 12px 40px rgba(0,0,0,.5);
  --sh-xl:  0 24px 60px rgba(0,0,0,.6);
}

/* ── Base Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow), color var(--t-slow);
}
img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; transition: color var(--t); }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: break-word;
}
p { color: var(--text-2); }