/* ── Arc-Grid site theme switcher ─────────────────────────────
   Overrides the inline :root{} medium defaults. Load AFTER the
   page <style> block so [data-theme] attribute rules win cascade.
────────────────────────────────────────────────────────────── */

/* ── Medium (Discord dark — site default) ────────────────── */
[data-theme="medium"] {
  --sunken:  #1E1F22;
  --base:    #2B2D31;
  --raised:  #313338;
  --overlay: #383A40;
  --border-subtle:  #27292C;
  --border-default: #3F4147;
  --border-strong:  #5C5F66;
  --text-primary:   #F2F3F5;
  --text-secondary: #B5BAC1;
  --text-tertiary:  #80848E;
  --accent:         #4FD6BE;
  --accent-bg:      rgba(79,214,190,.11);
  --accent-border:  rgba(79,214,190,.35);
  --green:          #57F287;
  --green-bg:       rgba(87,242,135,.09);
  --green-border:   rgba(87,242,135,.3);
  --red:            #ED4245;
}

/* ── Dark (deep navy) ────────────────────────────────────── */
[data-theme="dark"] {
  --sunken:  #0B0E14;
  --base:    #10141C;
  --raised:  #141926;
  --overlay: #1C2235;
  --border-subtle:  #181E2A;
  --border-default: #1E2530;
  --border-strong:  #2A3342;
  --text-primary:   #D7DEE8;
  --text-secondary: #8B96A5;
  --text-tertiary:  #5C6673;
  --accent:         #4FD6BE;
  --accent-bg:      rgba(79,214,190,.06);
  --accent-border:  rgba(79,214,190,.25);
  --green:          #57F287;
  --green-bg:       rgba(87,242,135,.07);
  --green-border:   rgba(87,242,135,.25);
  --red:            #F85149;
}

/* ── Light ───────────────────────────────────────────────── */
[data-theme="light"] {
  --sunken:  #F2F3F5;
  --base:    #FFFFFF;
  --raised:  #F7F8FA;
  --overlay: #FFFFFF;
  --border-subtle:  #E8EAED;
  --border-default: #D4D7DC;
  --border-strong:  #B9BBBE;
  --text-primary:   #1A1B1E;
  --text-secondary: #4E5058;
  --text-tertiary:  #86898F;
  --accent:         #1A9E8C;
  --accent-bg:      rgba(26,158,140,.07);
  --accent-border:  rgba(26,158,140,.3);
  --green:          #1A7A3F;
  --green-bg:       rgba(26,122,63,.08);
  --green-border:   rgba(26,122,63,.25);
  --red:            #C7312D;
}

/* ── Header background (hardcoded in page inline CSS) ────── */
[data-theme="dark"]  header{background:rgba(11,14,20,.92)}
[data-theme="light"] header{background:rgba(255,255,255,.95);border-bottom-color:#D4D7DC}

/* ── Header layout: theme button sits flush right of logo ── */
.hd{justify-content:flex-start}
nav.main{margin-left:auto}
@media(max-width:860px){
  .burger{margin-left:auto}
  nav.main{margin-left:0}
}

/* ── Theme cycle button ──────────────────────────────────── */
.theme-cycle{
  background:var(--raised);
  border:1px solid var(--border-default);
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:0; /* icon comes from ::before */
  padding:5px 9px;
  transition:color .15s,border-color .15s,background .15s;
  flex-shrink:0;
  line-height:1;
}
.theme-cycle::before{
  font-size:1rem;
  line-height:1;
  display:block;
}
[data-theme="light"]  .theme-cycle::before{content:'○'}
[data-theme="medium"] .theme-cycle::before{content:'◑'}
[data-theme="dark"]   .theme-cycle::before{content:'◕'}
.theme-cycle:hover{
  color:var(--accent);
  border-color:var(--accent-border);
  background:var(--accent-bg);
}