siftlode/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-scale: 1.06;
}

/* Make native controls (date picker, scrollbars) follow the theme. */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}

html {
  font-size: calc(16px * var(--font-scale));
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

/* ===== Color schemes (accent + neutrals), each with dark + light ===== */

/* Midnight — deep navy/slate with blue accent (default) */
html[data-scheme="midnight"][data-theme="dark"] {
  --bg: #0b1020;
  --surface: #121a2e;
  --card: #161f38;
  --border: #243049;
  --fg: #e6e9f0;
  --muted: #97a3c0;
  --accent: #6d8cff;
  --accent-fg: #0b1020;
}
html[data-scheme="midnight"][data-theme="light"] {
  --bg: #f4f6fc;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #dde3f0;
  --fg: #1a2238;
  --muted: #5b6685;
  --accent: #3b5bdb;
  --accent-fg: #ffffff;
}

/* Forest — dark slate with teal/green accent */
html[data-scheme="forest"][data-theme="dark"] {
  --bg: #0a1512;
  --surface: #0f1f1a;
  --card: #12241e;
  --border: #1f3a30;
  --fg: #e6f0ec;
  --muted: #90b1a4;
  --accent: #2dd4bf;
  --accent-fg: #04110d;
}
html[data-scheme="forest"][data-theme="light"] {
  --bg: #f1f7f4;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #d6e7e0;
  --fg: #102a22;
  --muted: #4d6b60;
  --accent: #0d9488;
  --accent-fg: #ffffff;
}

/* Slate — neutral grey with warm orange accent (muted in dark) */
html[data-scheme="slate"][data-theme="dark"] {
  --bg: #15171c;
  --surface: #1b1e25;
  --card: #1f232b;
  --border: #2c313b;
  --fg: #e7e9ee;
  --muted: #9aa1ad;
  --accent: #e8913c;
  --accent-fg: #1a1206;
}
html[data-scheme="slate"][data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #e3e6eb;
  --fg: #1c1f26;
  --muted: #5d636e;
  --accent: #d97706;
  --accent-fg: #ffffff;
}

/* YouTube — near-black with red accent */
html[data-scheme="youtube"][data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #181818;
  --card: #1f1f1f;
  --border: #303030;
  --fg: #f1f1f1;
  --muted: #aaaaaa;
  --accent: #ff3b46;
  --accent-fg: #ffffff;
}
html[data-scheme="youtube"][data-theme="light"] {
  --bg: #ffffff;
  --surface: #f9f9f9;
  --card: #ffffff;
  --border: #e5e5e5;
  --fg: #0f0f0f;
  --muted: #606060;
  --accent: #ff0033;
  --accent-fg: #ffffff;
}

/* Toast auto-dismiss countdown bar (shrinks left-to-right to zero) */
@keyframes toastbar {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Thin, theme-aware scrollbars */
* {
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}