/* Theme tokens for uiuxanjali.com — dark is the default, light is opt-in via the toggle. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1D23;
  --bg-rgb: 30,29,35;
  --ink: #E8E2D6;
  --ink-rgb: 232,226,214;
  --hd: #EDE6DA;
  --tx: #CAC4D2;
  --tx2: #D2CCD9;
  --tx3: #E2DDE8;
  --mut: #A8A2B5;
  --faint: #958FA2;
  --dot: #47444F;
  --line: rgba(232,226,214,.13);
  --ov-rgb: 255,255,255;
  --surf0: #19181D;
  --surf1: #25242B;
  --surf2: #2A2930;
  --surf3: #34333B;
  --pur: #9F84FF;  --pur-rgb: 159,132,255;
  --pur2: #7C63E0;
  --lav: #B9A7FF;  --lav-rgb: 185,167,255;
  --blu: #79A8FF;  --blu-rgb: 121,168,255;
  --grn: #6FCF8E;  --grn-rgb: 111,207,142;
  --red: #E07A6B;  --red-rgb: 224,122,107;
  --amb: #E0A04B;  --amb-rgb: 224,160,75;
  --tea: #5CD1C3;  --tea-rgb: 92,209,195;
  --cor: #F0A27A;  --cor-rgb: 240,162,122;
  --rust: var(--pur);
  --rust2: var(--blu);
  --sh-rgb: 0,0,0;
  --sh-k: 1;
  --toggle-bg: rgba(42,41,48,.88);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F9F5E9;
  --bg-rgb: 249,245,233;
  --ink: #2D2838;
  --ink-rgb: 45,40,56;
  --hd: #2D2838;
  --tx: #3A3546;
  --tx2: #383344;
  --tx3: #2D2838;
  --mut: #5E586C;
  --faint: #6B6579;
  --dot: #DDD6C2;
  --line: rgba(45,40,56,.16);
  --ov-rgb: 45,40,56;
  --surf0: #FFFDF7;
  --surf1: #FDFAF1;
  --surf2: #F6F1E3;
  --surf3: #E9E2CF;
  --pur: #6650D0;  --pur-rgb: 102,80,208;
  --pur2: #6650D0;
  --lav: #6C58CF;  --lav-rgb: 108,88,207;
  --blu: #4A60B8;  --blu-rgb: 74,96,184;
  --grn: #26704A;  --grn-rgb: 38,112,74;
  --red: #A8442F;  --red-rgb: 168,68,47;
  --amb: #85590F;  --amb-rgb: 133,89,15;
  --tea: #176A60;  --tea-rgb: 23,106,96;
  --cor: #A8481F;  --cor-rgb: 168,72,31;
  --sh-rgb: 52,36,92;
  --sh-k: .25;
  --toggle-bg: rgba(255,253,247,.92);
  --card: rgba(255,253,247,.9);
}

/* per-section light backgrounds: work = lavender mist, about = pale sky, lab = sage */
:root[data-theme="light"][data-page="work"] {
  --bg: #ECE5F3; --bg-rgb: 236,229,243;
  --surf0: #FAF7FD; --surf1: #F6F2FA; --surf2: #F1ECF7; --surf3: #DFD6EA;
  --dot: #D3C9E0; --card: rgba(250,247,253,.85); --toggle-bg: rgba(250,247,253,.85);
}
:root[data-theme="light"][data-page="about"] {
  --bg: #E2ECF2; --bg-rgb: 226,236,242;
  --surf0: #F6FAFC; --surf1: #F1F6F9; --surf2: #EAF1F5; --surf3: #D4E0E8;
  --dot: #C6D4DE; --card: rgba(246,250,252,.85); --toggle-bg: rgba(246,250,252,.85);
}
:root[data-theme="light"][data-page="lab"] {
  --bg: #E3E9DD; --bg-rgb: 227,233,221;
  --surf0: #F8FAF3; --surf1: #F3F6EE; --surf2: #EDF1E7; --surf3: #D7DFCF;
  --dot: #C9D3BF; --card: rgba(248,250,243,.85); --toggle-bg: rgba(248,250,243,.85);
}

html, body { background: var(--bg); }

/* dark mode: give cards a visible lift on the softer charcoal page */
:root:not([data-theme="light"]) [style*="background:rgba(var(--ov-rgb),"] { background-color: rgba(255,255,255,.035) !important; }

/* light mode: lift cards, panels and photo frames off the page so they don't blend into it */
:root[data-theme="light"] [style*="background:rgba(var(--ov-rgb),"] { background-color: var(--card) !important; }
:root[data-theme="light"] [style*="border:1px solid var(--line)"][style*="border-radius"][style*="background:rgba(var(--ov-rgb),"] { box-shadow: 0 1px 2px rgba(52,36,92,.05), 0 10px 26px -18px rgba(52,36,92,.22); }
:root[data-theme="light"] [data-portfolio-root] { --paper: var(--surf0) !important; }

/* readability: Geist regular reads thin on dark, so lift the base weight (variable font, 300-800 loaded) */
body { font-weight: 450; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }
[style*="font-family:var(--mono)"] { font-weight: 450; }
[style*="font-family:var(--serif)"], [style*="font-family:'Instrument Serif'"] { font-weight: 400; letter-spacing: .012em; word-spacing: .06em; font-kerning: normal; }
:root[data-theme="light"] body { font-weight: 430; }
::selection { background: var(--pur); color: var(--bg); }

/* theme switch */
.theme-toggle {
  position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--toggle-bg); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 11px/1 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 14px 34px -14px rgba(var(--sh-rgb), calc(.8 * var(--sh-k)));
  transition: transform .25s cubic-bezier(.16,.84,.36,1), border-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--pur); }
.theme-toggle:focus-visible { outline: 2px solid var(--pur); outline-offset: 3px; }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 560px) { .theme-toggle { padding: 0; width: 42px; justify-content: center; } .theme-toggle .lbl { display: none; } }

/* brief cross-fade while switching */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}