/* The Station Bar - Light & Dark Theme Tokens */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand */
  --color-primary: #F36B16;
  --color-primary-hover: #D9560B;
  --color-primary-soft: #FFF0E5;
  --color-on-primary: #FFFFFF;

  /* Surfaces */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F7F1EA;
  --color-surface-elevated: #FFFFFF;

  /* Text */
  --color-text: #191613;
  --color-text-muted: #6F6861;
  --color-text-subtle: #958A80;

  /* Borders & effects */
  --color-border: #E8DED3;
  --color-border-strong: #D4C3B2;
  --color-overlay: rgb(25 22 19 / 48%);
  --shadow-card: 0 8px 28px rgb(54 35 19 / 8%);

  /* Components */
  --color-header-bg: #FFFFFF;
  --color-input-bg: #FFFFFF;
  --color-footer-bg: #FFFFFF;
  --color-footer-shade: linear-gradient(
    to bottom,
    rgb(0 0 0 / 8%) 0%,
    rgb(0 0 0 / 55%) 34%,
    rgb(0 0 0 / 62%) 68%,
    rgb(0 0 0 / 28%) 100%
  );

  /* Photo overlay for the mobile events card. Same in both themes. */
  --color-scrim: rgb(8 7 6 / 78%);
  --color-on-scrim: #f6f1ea;
  --color-on-scrim-muted: #d4cbc2;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --color-primary: #FF741C;
  --color-primary-hover: #FF8A3D;
  --color-primary-soft: #321B0D;
  --color-on-primary: #17100B;

  /* Surfaces */
  --color-bg: #000000;
  --color-surface: #141210;
  --color-surface-alt: #1C1916;
  --color-surface-elevated: #211D19;

  /* Text */
  --color-text: #F5F0E9;
  --color-text-muted: #C0B5A9;
  --color-text-subtle: #96897C;

  /* Borders & effects */
  --color-border: #332B24;
  --color-border-strong: #514237;
  --color-overlay: rgb(0 0 0 / 65%);
  --shadow-card: 0 8px 28px rgb(0 0 0 / 24%);

  /* Components */
  --color-header-bg: #000000;
  --color-input-bg: #181512;
  --color-footer-bg: #000000;
  --color-footer-shade: rgb(0 0 0 / 68%);

  --color-scrim: rgb(8 7 6 / 78%);
  --color-on-scrim: #f6f1ea;
  --color-on-scrim-muted: #d4cbc2;
}