/* =========================================================
   theme.css — My Study Adda
   - Design tokens + Bootstrap bridge
   - Light & Dark themes
   - Single source of truth for layout offsets (no JS)
   ========================================================= */

/* ------------------ LIGHT THEME TOKENS ------------------ */
:root {
  /* Typography */
  --font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm:   14px;
  --font-size-lg:   18px;
  --line-height-base: 1.55;

  /* Brand palette (grey) */
  --brand-50:  #f7f7f7;
  --brand-100: #f0f0f0;
  --brand-200: #e6e6e6;  /* cards / subtle surface */
  --brand-300: #d6d6d6;  /* navbar background */
  --brand-400: #cfcfcf;  /* hover bg */
  --brand-500: #bcbcbc;  /* active/emphasis */
  --brand-600: #b3b3b3;
  --brand-700: #9e9e9e;
  --brand-800: #6e6e6e;
  --brand-900: #3a3a3a;

  /* Core colors */
  --color-bg:          #f4f4f4;
  --color-surface:     var(--brand-200);
  --color-surface-2:   var(--brand-300);
  --color-border:      #c2c2c2;
  --color-text:        #333333;
  --color-text-muted:  #666666;

  /* Accent */
  --color-accent:       #2f6fed;
  --color-accent-rgb:   47,111,237;
  --color-accent-hover: #2259c4;
  --color-on-accent:    #ffffff;

  /* Elevation */
  --shadow-1: 0 2px 6px  rgba(60,60,60,.06);
  --shadow-2: 0 4px 16px rgba(60,60,60,.10);

  /* Radii */
  --radius: 6px;

  /* Layout constants (NO JS; fixed values) */
  --brand-h: 84px; /* Navbar row 1 */
  --menu-h:  56px; /* Navbar row 2 */
  --nav-h: calc(var(--brand-h) + var(--menu-h)); /* ~140px total */

  --sidebar-w: 250px;     /* left fixed menu width */

  /* 3-col layout knobs (moved from inline <style>) */
  --gap: 16px;            /* equal space on both sides of center */
  --page-pad: 16px;       /* page padding (top/right/bottom); left is 0 next to fixed sidebar */
  --left-w: 250px;        /* left column width (sidebar) */
  --right-w: 320px;       /* right column width (ads) */
  --center-gutter: 12px;  /* inner padding for center content/footer */
}

/* ------------------ DARK THEME (manual toggle) ---------- */
:root[data-theme="dark"] {
  --color-bg:   #141414;
  --brand-300:  #232323;
  --brand-200:  #1b1b1b;
  --brand-400:  #2c2c2c;
  --brand-500:  #3a3a3a;
  --color-surface:   var(--brand-200);
  --color-surface-2: var(--brand-300);
  --color-border:    #3c3c3c;
  --color-text:      #e9e9e9;
  --color-text-muted:#bdbdbd;

  --color-accent:       #5a8cff;
  --color-accent-rgb:   90,140,255;
  --color-accent-hover: #4776ea;

  --shadow-1: 0 2px 6px rgba(0,0,0,.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,.45);
}

/* -------- Optional: prefer system dark if not forced ----- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:   #141414;
    --brand-300:  #232323;
    --brand-200:  #1b1b1b;
    --brand-400:  #2c2c2c;
    --brand-500:  #3a3a3a;
    --color-surface:   var(--brand-200);
    --color-surface-2: var(--brand-300);
    --color-border:    #3c3c3c;
    --color-text:      #e9e9e9;
    --color-text-muted:#bdbdbd;

    --color-accent:       #5a8cff;
    --color-accent-rgb:   90,140,255;
    --color-accent-hover: #4776ea;

    --shadow-1: 0 2px 6px rgba(0,0,0,.35);
    --shadow-2: 0 6px 20px rgba(0,0,0,.45);
  }
}

/* --------- Bridge tokens into Bootstrap variables -------- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size:   var(--font-size-base);
  --bs-body-line-height: var(--line-height-base);
  --bs-body-bg:          var(--color-bg);
  --bs-body-color:       var(--color-text);
  --bs-border-color:     var(--color-border);

  --bs-link-color:       var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);

  --bs-primary:                var(--color-accent);
  --bs-primary-rgb:            var(--color-accent-rgb);
  --bs-primary-text-emphasis:  var(--color-accent);
  --bs-primary-bg-subtle:      rgba(var(--color-accent-rgb), .12);
  --bs-primary-border-subtle:  rgba(var(--color-accent-rgb), .35);
}

/* ----------------- Global layout helpers ---------------- */
html, body { margin: 0; }              /* never add body margins */
body { padding-top: var(--nav-h) !important; }  /* content starts below fixed navbar */

/* Lock the navbar’s height so layout never jumps */
.navbar.fixed-top { min-height: var(--nav-h); }