/* Shared header/nav colors across the whole site.
   Base values are extracted from the homepage `index.html`.
   Accent values come from `tile-variables.css` based on `body[data-platform]`. */

@import url('/assets/css/tile-variables.css');

:root {
  /* Topbar (wąska belka nad menu) */
  --topbar-bg: #000000;
  --topbar-border-color: #18181b;
  --topbar-text-color: #72727f;
  --topbar-font-size: 10px;

  /* Menu skeleton */
  --nav-bg: rgba(0, 0, 0, 0.95);
  --nav-border-color: #27272a;
  --nav-brand-size: 20px;
  --nav-brand-color: #e2dfdf;
  --nav-link-size: 11px;
  --nav-link-color: #c8c8c8;

  /* Defaults (blue). App pages/platform selectors below will override accent. */
  --nav-brand-accent-color: #3b82f6;
  --nav-link-hover-color: #3b82f6;

  --nav-cta-border-color: #3b82f6;
  --nav-cta-text-color: #3b82f6;
  --nav-cta-font-size: 11px;
  --nav-cta-pulse-shadow-color: rgba(59, 130, 246, 0.4);
  --nav-cta-hover-bg: rgba(59, 130, 246, 0.12);
}

/* Accent derived from tiles */
body[data-platform="windows"] {
  --nav-brand-accent-color: var(--elite-btn-color);
  --nav-link-hover-color: var(--elite-btn-color);

  --nav-cta-border-color: var(--elite-btn-color);
  --nav-cta-text-color: var(--elite-btn-color);
  --nav-cta-pulse-shadow-color: var(--elite-btn-border);
  --nav-cta-hover-bg: var(--elite-btn-bg-hover);
}

body[data-platform="android"] {
  --nav-brand-accent-color: var(--eye-btn-color);
  --nav-link-hover-color: var(--eye-btn-color);

  --nav-cta-border-color: var(--eye-btn-color);
  --nav-cta-text-color: var(--eye-btn-color);
  --nav-cta-pulse-shadow-color: var(--eye-btn-border);
  --nav-cta-hover-bg: var(--eye-btn-bg-hover);
}

body[data-platform="web"] {
  --nav-brand-accent-color: var(--moto-btn-color);
  --nav-link-hover-color: var(--moto-btn-color);

  --nav-cta-border-color: var(--moto-btn-color);
  --nav-cta-text-color: var(--moto-btn-color);
  --nav-cta-pulse-shadow-color: var(--moto-btn-border);
  --nav-cta-hover-bg: var(--moto-btn-bg-hover);
}