/* ============================================
   FRAME — Theme Variables
   themes.css
   ============================================ */

/* ── Dark Theme (default) ── */
:root {
  --bg:           #080808;
  --surface:      #111111;
  --card:         #181818;
  --sb-bg:        #0D0D0D;
  --topbar-bg:    #060606;
  --navbar-bg:    rgba(9,9,9,0.96);

  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.13);

  --gold:         #C8A96E;
  --gold-light:   #E2C99A;
  --gold-dim:     rgba(200,169,110,0.45);

  --text:         #F0EAD6;
  --text-strong:  #FAFAF8;
  --text-muted:   #5A5550;
  --text-muted2:  #8A8480;

  --hero-grad:    radial-gradient(ellipse 60% 70% at 75% 40%, rgba(200,169,110,0.05) 0%, transparent 60%),
                  radial-gradient(ellipse 40% 50% at 15% 80%, rgba(200,169,110,0.03) 0%, transparent 60%),
                  linear-gradient(to bottom, #0A0A08, #080806);
  --grid-line:    rgba(200,169,110,0.022);

  --ph1:          linear-gradient(155deg, #2A1F14, #0E0C08);
  --ph2:          linear-gradient(155deg, #141A1F, #080C0E);
  --ph3:          linear-gradient(155deg, #1F1420, #0D080E);
  --ph4:          linear-gradient(155deg, #141F18, #080E0A);
  --ph5:          linear-gradient(155deg, #1A1510, #0E0C08);
  --sil-opacity:  0.07;

  --card-overlay: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  --hover-overlay:linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 55%);

  --cta-b-bg:     #0C0C0A;
  --cta-num-clr:  rgba(255,255,255,0.022);

  --sw:  240px;
  --rw:  210px;   /* right ad sidebar width */
  --rm:  25px;    /* right ad sidebar margin */
  --th:  36px;
  --nh:  48px;

  --transition-theme: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Keep sidebar logo + search dark in light mode */
html.light .sb-logo,
html.light .sb-search {
  background: #0D0D0D;
  border-color: rgba(255,255,255,0.07);
}
html.light .sb-logo .logo-name  { color: #FAFAF8; }
html.light .sb-logo .logo-sub   { color: #5A5550; }
html.light .sb-sbox              { background: #181818; border-color: rgba(255,255,255,0.07); }
html.light .sb-sinput            { color: #F0EAD6; }
html.light .sb-sinput::placeholder { color: #5A5550; }

/* Keep topbar links/inputs readable on dark bg in light mode */
html.light .topbar-link  { color: #8A8480; }
html.light .topbar-link:hover { color: #C8A96E; }
html.light .topbar-input { background: #181818; border-color: rgba(255,255,255,0.07); color: #F0EAD6; }
html.light .topbar-input::placeholder { color: #5A5550; }
html.light .topbar-remind { color: #5A5550; }
html.light .topbar-remind:hover { color: #C8A96E; }
html.light .lang-btn  { background: #181818; border-color: rgba(255,255,255,0.07); color: #8A8480; }
html.light .lang-dropdown { background: #181818; border-color: rgba(255,255,255,0.13); }
html.light .lang-option   { color: #8A8480; }
html.light .lang-option:hover { background: #111111; color: #C8A96E; }
html.light .theme-toggle  { background: #181818; border-color: rgba(255,255,255,0.07); }
html.light .tt-lbl         { color: #8A8480; }
html.light .nav-link       { color: #6B6560; }
html.light .nav-link:hover { color: #F0EAD6; background: rgba(255,255,255,0.06); }
html.light .nav-link.active { color: #C8A96E; }
html.light .ndd, html.light .nav-dropdown { background: #181818; border-color: rgba(255,255,255,0.13); }
html.light .nav-dd-item    { color: #8A8480; }
html.light .nav-dd-item:hover { background: #111111; color: #F0EAD6; }
html.light .nav-sep        { background: rgba(255,255,255,0.1); }

/* ── Light Theme ── */
html.light {
  --bg:           #F7F4EF;
  --surface:      #EDE8DF;
  --card:         #E4DDD2;
  --sb-bg:        #F0EBE3;
  --topbar-bg:    #060606;   /* stays dark */
  --navbar-bg:    rgba(9,9,9,0.97); /* stays dark */

  --border:       rgba(0,0,0,0.09);
  --border2:      rgba(0,0,0,0.15);

  --gold:         #A87C3E;
  --gold-light:   #C8A96E;
  --gold-dim:     rgba(168,124,62,0.4);

  --text:         #18140F;
  --text-strong:  #0A0806;
  --text-muted:   #6E6358;
  --text-muted2:  #4A4038;

  --hero-grad:    radial-gradient(ellipse 60% 70% at 75% 40%, rgba(168,124,62,0.07) 0%, transparent 60%),
                  radial-gradient(ellipse 40% 50% at 15% 80%, rgba(168,124,62,0.04) 0%, transparent 60%),
                  linear-gradient(to bottom, #F2EDE5, #EDE7DC);
  --grid-line:    rgba(168,124,62,0.04);

  --ph1:          linear-gradient(155deg, #D4C4B0, #B8A890);
  --ph2:          linear-gradient(155deg, #B0BEC4, #96AABC);
  --ph3:          linear-gradient(155deg, #C4B0C8, #AC96B4);
  --ph4:          linear-gradient(155deg, #B0C4B8, #96B0A4);
  --ph5:          linear-gradient(155deg, #C4B8A8, #B0A090);
  --sil-opacity:  0.15;

  --card-overlay: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  --hover-overlay:linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);

  --cta-b-bg:     #E8E2D6;
  --cta-num-clr:  rgba(0,0,0,0.04);
}