html.no-theme-transition *,
html.no-theme-transition *::before,
html.no-theme-transition *::after{
  transition:none !important;
}

:root {
  /* light theme */
  --bg: #f3f2f2;
  --text: #201f1d;
  --muted: rgba(32, 31, 29, 0.68);
  --line: rgba(32, 31, 29, 0.14);
  --panel: #eae9e9;
  --panel-2: rgba(32, 31, 29, 0.06);
  --sidebar-bg: rgba(243, 242, 242, 0.75);
  --accent: #b68235;
  --accent-text: #fff3e4;
  --chip-bg: rgba(32, 31, 29, 0.05);
  --chip-text: rgba(32, 31, 29, 0.68);
  --avatar-fallback: rgba(182, 130, 53, 0.35);

  /* warm-gold tonal ramp: lightest → darkest. --accent is stroke/text
     only, never a filled background; the tint/shade are for hover
     washes and depth (see np-play, avatar frame). */
  --accent-tint: #fff3e4;
  --accent-shade: #3a270d;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(32, 31, 29, 0.10);

  /* toggle (light mode) */
  --toggle-track: #eae9e9;
  --toggle-icon: #201f1d;
  --toggle-thumb: #f3f2f2;
}

html[data-theme="dark"] {
  --bg: #1b2420;
  --text: #e3e8e1;
  --muted: #8a9c8f;
  --line: #2b362f;
  --accent: #5ec98b;
  --accent-text: #0e1512;

  --panel: #151c19;
  --panel-2: #151c19;

  --chip-bg: #28332c;
  --chip-text: #cdd9cf;
  --avatar-fallback: #3f6e54;

  --shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  --sidebar-bg: #151c19;
  --accent-tint: rgba(94, 201, 139, 0.15);

  /* toggle (dark mode) */
  --toggle-track: rgba(227, 232, 225, 0.12);
  --toggle-icon: #1b2420;
  --toggle-thumb: #e3e8e1;
}

html, body {
  height: 100%;
}

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

  font-family: "Lora", Georgia, "Times New Roman", serif;

  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* smooth theme transitions */
body,
.sidebar,
.sidebar-card,
.main,
.page,
.panel,
.project-card,
.tech-item,
.dev-row,
.nav-link,
.theme-toggle-track,
.theme-toggle-thumb {
  transition:
    background-color 900ms ease,
    color 900ms ease,
    border-color 900ms ease,
    box-shadow 900ms ease;
}

img {
  transition: filter 900ms ease;
}

/* keep code monospace */
.mono, .v, code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}