/* MaFel Hub — design tokens.
   Own token system for the Hub (NOT shared with MaFel Core).
   Brand palette, light/dark themes, typography and spacing scale. */

:root {
  /* Brand palette */
  --brand-navy: #0F1C2E;     /* text / stroke */
  --brand-cobalt: #1E40AF;   /* accent / "liquid" */
  --brand-sky: #3B6CD4;      /* "Hub" highlight */
  --brand-grey: #94A3C7;     /* inactive module */

  /* Status semaphore */
  --status-ok: #1F9D55;
  --status-warn: #D98A0B;
  --status-crit: #C2392B;

  /* Rubik sticker states */
  --sticker-active: #1F9D55;
  --sticker-trial: #D98A0B;
  --sticker-off: #94A3C7;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(15, 28, 46, 0.12), 0 4px 16px rgba(15, 28, 46, 0.08);
}

/* Light theme (default) */
:root,
[data-theme="light"] {
  --bg: #F4F6FB;
  --bg-panel: #FFFFFF;
  --bg-elevated: #FDFDFF;
  --bg-inset: #EDF1F9;
  --text: #0F1C2E;
  --text-muted: #5A6B86;
  --border: #DCE3F0;
  --accent: var(--brand-cobalt);
  --accent-soft: rgba(30, 64, 175, 0.10);
  --link: var(--brand-sky);
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #0A1320;
  --bg-panel: #111E31;
  --bg-elevated: #16263C;
  --bg-inset: #0E1A2B;
  --text: #E6ECF7;
  --text-muted: #94A3C7;
  --border: #233650;
  --accent: var(--brand-sky);
  --accent-soft: rgba(59, 108, 212, 0.16);
  --link: #7FA6E8;
}

/* Respect OS preference when no explicit choice was made */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0A1320;
    --bg-panel: #111E31;
    --bg-elevated: #16263C;
    --bg-inset: #0E1A2B;
    --text: #E6ECF7;
    --text-muted: #94A3C7;
    --border: #233650;
    --accent: var(--brand-sky);
    --accent-soft: rgba(59, 108, 212, 0.16);
    --link: #7FA6E8;
  }
}
