/* letz gooo: the brand theme. Loaded after nocturne.css and before app.css, it re-tints Nocturne's tokens in
   the colours of Luxembourg's flag (red, white, light blue) on a night-blue base. Only tokens change here,
   so every screen picks the theme up; the wordmark styles are at the end. */
:root {
  /* The flag, as in the logo. */
  --lux-red: #e0283c;
  --lux-red-deep: #ae1c33;
  --lux-white: #ffffff;
  --lux-blue: #4ab5e3;

  --color-bg: #0e1522;
  --color-surface: #18212f;
  --color-text: #eef2f7;
  --color-divider: color-mix(in srgb, #eef2f7 14%, transparent);

  --color-neutral-100: #f2f5f9;
  --color-neutral-200: #e1e7ef;
  --color-neutral-300: #c9d2de;
  --color-neutral-400: #a9b4c3;
  --color-neutral-500: #8a95a6;
  --color-neutral-600: #6c7788;
  --color-neutral-700: #505a6a;
  --color-neutral-800: #354050;
  --color-neutral-900: #222a36;

  /* Accent: Luxembourg light blue. */
  --color-accent: var(--lux-blue);
  --color-accent-100: #eef8fd;
  --color-accent-200: #d4eefa;
  --color-accent-300: #a9dcf3;
  --color-accent-400: #7cc9ec;
  --color-accent-500: #4ab5e3;
  --color-accent-600: #2f97c6;
  --color-accent-700: #23739a;
  --color-accent-800: #1a5170;
  --color-accent-900: #12324a;

  /* Second accent: Luxembourg red. */
  --color-accent-2: var(--lux-red);
  --color-accent-2-100: #fdecee;
  --color-accent-2-200: #f9cfd4;
  --color-accent-2-300: #f29ea9;
  --color-accent-2-400: #ea6878;
  --color-accent-2-500: #e0283c;
  --color-accent-2-600: #b81d31;
  --color-accent-2-700: #8f1626;
  --color-accent-2-800: #66101c;
  --color-accent-2-900: #3f0a12;

  --color-section: #12304a;
  --color-section-glow: #1b4566;
  --color-section-ghost: #2a5d85;

  --shadow-sm: 0 0 0 1px #354050;
  --shadow-md: 0 0 0 1px #505a6a, 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px #8a95a6, 0 16px 40px rgba(0, 0, 0, .65);
}

/* — wordmark: "letz gooo", the three o's red, blue, red — */
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; }
.brand:hover { color: var(--color-text); }
.brand img { width: 30px; height: 30px; display: block; }
.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.wordmark b { font-weight: 700; }
.wordmark .o-red { color: var(--lux-red); }
.wordmark .o-blue { color: var(--lux-blue); }