:root {
  --accent-hover: #ffe099;
  --code:         #f06292;
  --preformatted: #ccc;
  --marked:       #ffdd33;
  --disabled:     #111;
}

:root {
  --bg:           #3a2a78;   /* grape purple */
  --accent-bg:    #4a3492;   /* panel */
  --text:         #f3f0ff;
  --text-light:   #d1c8ff;
  --border:       #a89cff;
  --accent:       #4dffa3;   /* mint/lime link */
  --accent-icons: #ff5a5f;   /* red-pink (very 90s) */
  --accent-nav:   var(--accent);
  --accent-text:  #1d133f;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { 
	/* light theme by OS */
    --bg:           #fff8e1;
    --accent-bg:    #efe8c9; /* #e7ddbf; #e2e4c1; */
    --text:         #181812;
    --text-light:   #5e5a49; /* #ababab; */
    --border:       #6e6a57; /* #898EA4; */
    --accent:       #0f6f6b;
    --accent-text:  var(--bg);
    --accent-icons: #e36a00;
    --accent-nav:   var(--accent-icons);
  }
}

/* Dark theme override */
:root[data-theme="TK-80 Dark"] {
  --bg:           #181720;
  --accent-bg:    #232433;
  --text:         #dcdcdc;
  --text-light:   #ababab;
  --border:       #898EA4;
  --accent:       #37f4fe;
  --accent-text:  var(--bg);
  --accent-icons: #f31dae;
  --accent-nav:   var(--accent);
}

/* Light theme override */
:root[data-theme="TK-70 Light"] { 
  --bg:           #fff8e1;
  --accent-bg:    #efe8c9; /* #e7ddbf; #e2e4c1; */
  --text:         #181812;
  --text-light:   #5e5a49; /* #ababab; */
  --border:       #6e6a57; /* #898EA4; */
  --accent:       #0f6f6b;
  --accent-text:  var(--bg);
  --accent-icons: #e36a00;
  --accent-nav:   var(--accent-icons);
}

/* TODO: TK-90 theme override (a kind of medium-solarized?) */
:root[data-theme="TK-90 Mid"] {
  --bg:           #2a2a6b;   /* periwinkle-ish deep blue */
  --accent-bg:    #3a3a86;   /* lighter panel */
  --text:         #f0f0f5;   /* soft near-white */
  --text-light:   #c7c7d6;   /* secondary text */
  --border:       #8f90c7;   /* lavender-gray border */
  --accent:       #35d7ff;   /* link cyan */
  --accent-icons: #ff4fb8;   /* hot pink */
  --accent-nav:   var(--accent); /* or var(--accent-icons) if you want */
  --accent-text:  #16163a;   /* for buttons on bright fills */
}

/* this one probably, test with above backgrounds and these accents maybe */
:root[data-theme="TK-90 Grape"] {
  --bg:           #3a2a78;   /* grape purple */
  --accent-bg:    #4a3492;   /* panel */
  --text:         #f3f0ff;
  --text-light:   #d1c8ff;
  --border:       #a89cff;
  --accent:       #4dffa3;   /* mint/lime link */
  --accent-icons: #ff5a5f;   /* red-pink (very 90s) */
  --accent-nav:   var(--accent);
  --accent-text:  #1d133f;
}