/* Yggdrasil — color tokens. Dark-mode-first: black & gold core, per-service accent theming. */
:root {
  /* ── Surfaces (near-black, slightly warm) ── */
  --bg-0: #060607;   /* page */
  --bg-1: #0b0b0e;   /* raised section / nav */
  --bg-2: #111116;   /* card */
  --bg-3: #17171e;   /* hover surface */
  --bg-4: #1f1f28;   /* highest surface / code blocks */

  /* ── Foreground (warm off-whites) ── */
  --fg-1: #ece8dc;   /* primary text */
  --fg-2: #b1ada0;   /* secondary */
  --fg-3: #7f7c70;   /* tertiary / captions */
  --fg-4: #55534a;   /* disabled / faint */

  /* ── Borders ── */
  --border-subtle: rgba(236, 232, 220, 0.08);
  --border-strong: rgba(236, 232, 220, 0.16);

  /* ── Gold ramp (main-site accent) ── */
  --gold-200: #f0e2b4;
  --gold-300: #e3c76d;
  --gold-400: #d6b448;
  --gold-500: #c9a227;  /* core accent */
  --gold-600: #9a7c1e;
  --gold-700: #6b5615;

  /* ── Purple ramp (Jellyfin) ── */
  --purple-300: #cbb3ec;
  --purple-400: #b591e2;
  --purple-500: #a06fd6;
  --purple-600: #7b50ab;

  /* ── Teal ramp (Jellyseerr) ── */
  --teal-300: #a3ded2;
  --teal-400: #74cbba;
  --teal-500: #4db6a4;
  --teal-600: #38907f;

  /* ── Blue ramp (OpenWebUI) ── */
  --blue-300: #b0cfeb;
  --blue-400: #86b6e1;
  --blue-500: #5f9dd6;
  --blue-600: #4679a8;

  /* ── Semantic status ── */
  --ok: #6fbf8b;
  --warn: #d9a441;
  --danger: #c96a5e;

  /* ── Text aliases ── */
  --text-heading: #f4f1e7;
  --text-body: var(--fg-1);
  --text-muted: var(--fg-2);
  --text-disabled: var(--fg-4);

  /* ── Surface aliases ── */
  --surface-page: var(--bg-0);
  --surface-raised: var(--bg-1);
  --surface-card: var(--bg-2);
  --surface-overlay: var(--bg-4);

  /* ── Accent theming layer (defaults = gold / main site).
        Scope [data-service="…"] on any subtree to retheme it. ── */
  --accent: var(--gold-500);
  --accent-bright: var(--gold-300);
  --accent-soft: var(--gold-200);
  --accent-deep: var(--gold-600);
  --accent-line: rgba(201, 162, 39, 0.38);
  --accent-tint: rgba(201, 162, 39, 0.12);
  --on-accent: #141004;

  /* ── Washes ── */
  --wash-canopy: radial-gradient(60% 80% at 50% -10%, rgba(201, 162, 39, 0.10), transparent 70%); /* @kind other */
}

[data-service="jellyfin"] {
  --accent: var(--purple-500);
  --accent-bright: var(--purple-300);
  --accent-soft: #ead9fb;
  --accent-deep: var(--purple-600);
  --accent-line: rgba(160, 111, 214, 0.40);
  --accent-tint: rgba(160, 111, 214, 0.13);
  --on-accent: #130a1d;
  --wash-canopy: radial-gradient(60% 80% at 50% -10%, rgba(160, 111, 214, 0.10), transparent 70%); /* @kind other */
}

[data-service="jellyseerr"] {
  --accent: var(--teal-500);
  --accent-bright: var(--teal-300);
  --accent-soft: #d4f1ea;
  --accent-deep: var(--teal-600);
  --accent-line: rgba(77, 182, 164, 0.40);
  --accent-tint: rgba(77, 182, 164, 0.12);
  --on-accent: #06140f;
  --wash-canopy: radial-gradient(60% 80% at 50% -10%, rgba(77, 182, 164, 0.10), transparent 70%); /* @kind other */
}

[data-service="openwebui"] {
  --accent: var(--blue-500);
  --accent-bright: var(--blue-300);
  --accent-soft: #dcebf9;
  --accent-deep: var(--blue-600);
  --accent-line: rgba(95, 157, 214, 0.40);
  --accent-tint: rgba(95, 157, 214, 0.12);
  --on-accent: #08111c;
  --wash-canopy: radial-gradient(60% 80% at 50% -10%, rgba(95, 157, 214, 0.10), transparent 70%); /* @kind other */
}