/* =========================================================
   ROOT.CSS - BASE, VARIABLES & THEME SYSTEM (MERGED & SAFE)
========================================================= */

/* --- 1. RESET + BASE --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-base), color var(--motion-base);
  backface-visibility: hidden;
}

/* --- 2. FOCUS CONTROL --- */
a, button, [role="button"] {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- 3. CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px; 
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 10px; 
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-soft);
}

/* --- 4. THEME VARIABLES (DEFAULT DARK) --- */
:root {
  color-scheme: dark;

  /* Base Colors */
  --bg: #0b0f1a;
  --bg-soft: #0e1324;
  --text: #e8ebf0;
  --text-soft: #b7bdd3;
  --card: rgba(255,255,255,0.04);
  --surface: var(--card);
  --surface-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --accent: #4da3ff;
  --accent-soft: rgba(77,163,255,0.15);

  /* Shadows */
  --shadow-sm: 0 8px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
  --sl-shadow: inset 0 1px 0 rgba(255,255,255,0.4);

  /* Button System (Restored all missing variables) */
  --btn-p-bg: linear-gradient(135deg, #4da3ff, #6cf0c2);
  --btn-p-text: #000;
  --btn-p-shadow: 0 10px 30px rgba(77,163,255,0.25);
  --btn-p-shadow-hover: 0 16px 40px rgba(77,163,255,0.35);

  --btn-s-bg: color-mix(in srgb, var(--card) 82%, transparent);
  --btn-s-bg-hover: color-mix(in srgb, var(--card) 92%, transparent);
  --btn-s-text: var(--text);
  --btn-s-border: var(--border);
  --btn-s-shadow: 0 6px 16px rgba(0,0,0,0.25);
  --btn-s-shadow-hover: 0 10px 26px rgba(0,0,0,0.35);

  /* Card Settings (Restored shadows) */
  --card-radius: 18px;
  --card-blur: 14px;
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Action/Button Sizing (Restored missing paddings & gaps) */
  --action-radius: 10px;
  --action-padding: 10px;
  --action-gap: 10px;
  --action-hover: translateY(-2px);
  --action-active: scale(0.96);

  /* Modal & Motion */
  --modal-bg: rgba(0,0,0,0.6);
  --modal-blur: 8px;
  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --motion-slow: 0.4s;
}

/* --- 5. LIGHT MODE (RESTORED SAFE OVERRIDES) --- */
body.light {
  color-scheme: light;

  /* Base Colors */
  --bg: #faf7f2;
  --bg-soft: #ffffff;
  --text: #1f2937;
  --text-soft: #4b5563;
  --card: rgba(255,255,255,0.7);
  --surface: var(--card);
  --surface-2: rgba(0,0,0,0.04);
  --border: rgba(31,41,55,0.12);
  --accent: #f97316;
  --accent-soft: rgba(249,115,22,0.15);

  /* Shadows & Glow */
  --shadow-sm: 0 10px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 30px 70px rgba(0,0,0,0.18);
  --sl-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 20px rgba(0,0,0,0.08);

  /* Card Overrides */
  --card-blur: 10px;
  --card-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 24px rgba(0,0,0,0.12);
  --card-shadow-hover: 0 16px 40px rgba(0,0,0,0.18);

  /* Button Overrides */
  --btn-p-bg: linear-gradient(135deg, #f97316, #facc15);
  --btn-p-text: #1f2937;
  --btn-p-shadow: 0 10px 28px rgba(249,115,22,0.25);
  --btn-p-shadow-hover: 0 16px 42px rgba(249,115,22,0.35);

  --btn-s-bg: linear-gradient(180deg, rgba(249,115,22,0.08), rgba(249,115,22,0.04));
  --btn-s-bg-hover: linear-gradient(180deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06));
  --btn-s-text: #1f2937;
  --btn-s-border: rgba(249,115,22,0.25);
  --btn-s-shadow-hover: 0 10px 26px rgba(0,0,0,0.25);
}

/* --- 6. BACKGROUND SWITCH EFFECT --- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  transition: opacity var(--motion-slow) cubic-bezier(.22,.61,.36,1);
}

body::before {
  background:
    radial-gradient(600px 300px at 15% 10%, rgba(77,163,255,0.15), transparent),
    radial-gradient(500px 400px at 85% 20%, rgba(108,240,194,0.12), transparent);
}

body::after {
  background:
    radial-gradient(600px 300px at 15% 10%, rgba(249,115,22,0.15), transparent),
    radial-gradient(500px 400px at 85% 20%, rgba(250,204,21,0.15), transparent);
  opacity: 0;
}

body.light::before { opacity: 0; }
body.light::after  { opacity: 1; }