/* themes.css — colour tokens for Dark (default) and Light mode.
   Change the identity here: --accent is the only brand colour. */

:root {
  /* Brand */
  --accent: #FF6B35;
  --accent-hover: #FF8457;
  --on-accent: #16120F;          /* text on top of the accent colour */
  --color-primary: var(--accent);/* used by the logo SVG */

  /* Dark mode (default) */
  color-scheme: dark;
  --bg: #111214;
  --bg-elev: #17191C;
  --surface: #1C1F23;
  --surface-2: #262A2F;
  --border: #2E3338;
  --border-strong: #454B52;
  --text: #F3F4F5;
  --text-muted: #A7ADB4;
  --accent-text: #FF7A4A;        /* accent used for small text/links */
  --danger: #FF8A80;
  --focus: #FFB08F;
  --nav-bg: rgba(17, 18, 20, 0.85);
  --overlay: rgba(6, 7, 8, 0.72);
  --shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  --img-placeholder: #23272C;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F4F1;
  --bg-elev: #EEEBE6;
  --surface: #FFFFFF;
  --surface-2: #F0EDE8;
  --border: #E0DBD3;
  --border-strong: #C4BDB2;
  --text: #16181A;
  --text-muted: #565C63;
  --accent-text: #B03A0C;
  --danger: #B42318;
  --focus: #B03A0C;
  --nav-bg: rgba(246, 244, 241, 0.88);
  --overlay: rgba(20, 18, 15, 0.55);
  --shadow: 0 14px 30px -20px rgba(30, 24, 18, 0.35);
  --img-placeholder: #E4DFD8;
}