/* ============================================
   Component / pattern tokens — scoped knobs.
   Composed from semantic tokens. Add only when a
   component diverges from a semantic default.
   ============================================ */

:root {
  /* Badges */
  --badge-tag-bg: color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100));
  --badge-tag-fg: color-mix(in oklch, var(--color-accent) 75%, var(--color-base-content));

  --badge-online-bg: var(--primary-muted);
  --badge-online-fg: var(--primary-muted-foreground);

  --badge-location-bg: color-mix(in oklch, var(--color-success) 22%, var(--color-base-100));
  --badge-location-fg: color-mix(in oklch, var(--color-success) 75%, var(--color-base-content));

  /* Buttons */
  --btn-primary-bg: var(--primary);
  --btn-primary-fg: var(--primary-foreground);
  --btn-primary-bg-hover: var(--primary-hover);

  --btn-ghost-bg-hover: var(--primary-muted);
  --btn-ghost-border: var(--border);
  --btn-ghost-border-hover: color-mix(in oklch, var(--primary) 25%, var(--background));

  /* Card */
  --card-border: var(--border);
  --card-border-hover: color-mix(in oklch, var(--primary) 35%, var(--background));

  /* Header */
  --header-bg: var(--card);
  --header-border: var(--border);
  --header-fg: var(--foreground);
  --header-fg-muted: var(--foreground-muted);
  --header-link: var(--primary);
  --header-link-hover-bg: color-mix(in oklch, var(--primary) 25%, var(--background));
  --header-link-inactive: color-mix(in oklch, var(--primary) 50%, var(--background));

  /* Footer */
  --footer-bg: var(--muted);
  --footer-border: var(--border);
  --footer-fg-muted: var(--foreground-muted);

  /* Subtle separator (e.g. dot between meta items) */
  --separator-fg: var(--foreground-subtle);
}