/* Mobile theme tokens.
   Switch palette by setting data-theme on <html>: gold (default) | silver | ink.
   Every accent color in the mobile views resolves through these variables. */

:root {
  /* accent family */
  --accent: #f0b90b;
  --accent-rgb: 240, 185, 11;
  --accent-light: #f5d03b;
  --accent-deep: #d4a00a;
  --accent-contrast: #000;

  /* glass frame + atmosphere, consumed by glass.css */
  --glass-base: #07080d;
  --glass-frame-rgb: 212, 175, 55;
  --glow-primary-rgb: 240, 185, 11;
  --glow-secondary-rgb: 96, 150, 255;
}

html[data-theme="silver"] {
  --accent: #7aa7ff;
  --accent-rgb: 122, 167, 255;
  --accent-light: #a9c6ff;
  --accent-deep: #4f7fe0;
  --accent-contrast: #041022;

  --glass-base: #05080f;
  --glass-frame-rgb: 150, 180, 235;
  --glow-primary-rgb: 122, 167, 255;
  --glow-secondary-rgb: 150, 230, 255;
}

html[data-theme="ink"] {
  --accent: #35c795;
  --accent-rgb: 53, 199, 149;
  --accent-light: #6fe0b6;
  --accent-deep: #1f9470;
  --accent-contrast: #04120d;

  --glass-base: #050c09;
  --glass-frame-rgb: 120, 200, 170;
  --glow-primary-rgb: 53, 199, 149;
  --glow-secondary-rgb: 90, 170, 255;
}

/* Inline SVG logos cannot read variables through the fill attribute,
   so they inherit the accent through currentColor. */
.logo-icon {
  color: var(--accent);
}