/* Einhell Brand Guide 2026: colour tokens */
:root {
  /* Primary palette */
  --einhell-red: #d50b1e;
  --einhell-black: #000000;
  --einhell-grey: #868489;

  /* Secondary palette */
  --einhell-neon-red: #ff2c30;
  --einhell-sealed-blue: #007dbe;
  --einhell-professional-grey: #3a3a3a;

  /* Professional gradient: vertical, black at the top, neon red at the bottom */
  --einhell-gradient: linear-gradient(to bottom, var(--einhell-black) 20%, var(--einhell-red) 70%, var(--einhell-neon-red) 100%);

  /* Typography: swap when the guide's type section is available */
  --font-body: "Montserrat", Arial, system-ui, sans-serif;
}

/* Semantic tokens: dark is the brand default */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--einhell-black);
  --surface: color-mix(in srgb, var(--einhell-professional-grey) 38%, #000);
  --surface-2: color-mix(in srgb, var(--einhell-professional-grey) 70%, #000);
  --line: var(--einhell-professional-grey);
  --fg: #ffffff;
  --muted: var(--einhell-grey);
  --accent: var(--einhell-red);
  --accent-ink: #ffffff;
  --accent-text: var(--einhell-neon-red);
  --accent-soft: color-mix(in srgb, var(--einhell-red) 24%, #000);
  --info: var(--einhell-sealed-blue);
  --warn: #e2a24a;
  --pin-ring: #ffffff;
  --pin-empty: #000000;
  --tile-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) grayscale(.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--einhell-grey) 12%, #fff);
  --line: color-mix(in srgb, var(--einhell-grey) 40%, #fff);
  --fg: #000000;
  --muted: color-mix(in srgb, var(--einhell-grey) 70%, #000);
  --accent: var(--einhell-red);
  --accent-ink: #ffffff;
  --accent-text: var(--einhell-red);
  --accent-soft: color-mix(in srgb, var(--einhell-red) 10%, #fff);
  --warn: #8f5200;
  --pin-ring: #ffffff;
  --pin-empty: #ffffff;
  --tile-filter: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 4px 14px rgba(0, 0, 0, .14);
}