/* ============================================
   vars.css — CSS Custom Properties / Theming
   ============================================ */

:root {
  /* Fonts */
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing scale */
  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transition */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.22);

  /* Max width */
  --max-w: 1180px;
}

/* ===== DARK THEME (default) ===== */
[data-theme="dark"] {
  --bg:          #0d0f14;
  --bg-2:        #12151c;
  --bg-3:        #1a1e28;
  --bg-card:     #161a24;
  --border:      rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.16);

  --text:        #eef0f6;
  --text-muted:  #7a8099;
  --text-faint:  #3d4259;

  --accent:      #e8ff47;       /* electric lime */
  --accent-2:    #5c6bff;       /* indigo */
  --accent-hover:#d6f000;

  --btn-primary-bg:   #e8ff47;
  --btn-primary-text: #0d0f14;
  --btn-ghost-border: rgba(255,255,255,0.15);
  --btn-ghost-text:   #eef0f6;

  --tag-bg:    rgba(232,255,71,0.08);
  --tag-text:  #e8ff47;

  --input-bg:    #1a1e28;
  --input-border:#2a2f40;
  --input-focus: #e8ff47;

  --success: #2ecc71;
  --error:   #e74c3c;
  --warning: #f39c12;

  --navbar-bg: rgba(13,15,20,0.88);
  --footer-bg: #0a0c10;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg:          #f5f6fa;
  --bg-2:        #ffffff;
  --bg-3:        #eef0f6;
  --bg-card:     #ffffff;
  --border:      rgba(0,0,0,0.07);
  --border-hover:rgba(0,0,0,0.18);

  --text:        #0d0f14;
  --text-muted:  #5a6177;
  --text-faint:  #b0b8cc;

  --accent:      #1a2bff;
  --accent-2:    #e8ff47;
  --accent-hover:#0016e0;

  --btn-primary-bg:   #1a2bff;
  --btn-primary-text: #ffffff;
  --btn-ghost-border: rgba(0,0,0,0.15);
  --btn-ghost-text:   #0d0f14;

  --tag-bg:    rgba(26,43,255,0.08);
  --tag-text:  #1a2bff;

  --input-bg:    #ffffff;
  --input-border:#d0d5e8;
  --input-focus: #1a2bff;

  --success: #27ae60;
  --error:   #c0392b;
  --warning: #d68910;

  --navbar-bg: rgba(245,246,250,0.92);
  --footer-bg: #0d0f14;
}