/* Muse design tokens — from the HyperFrames design system (colors_and_type.css), light + dark.
   Theme is set on <html data-theme="light|dark"> by theme.js. */
:root {
  --hf-bg: #f6f5f1;
  --hf-surface: #ffffff;
  --hf-surface-2: #eeedea;
  --hf-border: #e0dfdb;
  --hf-border-strong: #d0cfcb;
  --hf-fg: #1a1a1a;
  --hf-fg-secondary: #6b6b6b;
  --hf-fg-tertiary: #999999;
  --hf-heading: #0a0a0a;
  --hf-on-heading: #ffffff;
  --hf-code-bg: #ffffff;
  --hf-accent-green: #1a7a0a;
  --hf-accent-green-bg: rgba(26,122,10,0.07);
  --hf-accent-green-border: rgba(26,122,10,0.25);
  --hf-accent-blue: #2563eb;
  --hf-accent-blue-bg: rgba(37,99,235,0.06);
  --hf-accent-blue-border: rgba(37,99,235,0.20);
  --hf-accent-purple: #7c3aed;
  --hf-accent-purple-bg: rgba(124,58,237,0.06);
  --hf-accent-purple-border: rgba(124,58,237,0.20);
  --hf-accent-red: #dc2626;
  --hf-accent-red-bg: rgba(220,38,38,0.06);
  --hf-accent-red-border: rgba(220,38,38,0.22);
  --hf-accent-amber: #b45309;
  --hf-accent-amber-bg: rgba(180,83,9,0.07);
  --hf-accent-amber-border: rgba(180,83,9,0.25);
  --hf-selection: rgba(128,128,128,0.20);

  --hf-font-display: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --hf-font-body: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hf-font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  --hf-radius-sm: 4px;
  --hf-radius-md: 6px;
  --hf-radius-lg: 8px;
  --hf-radius-xl: 12px;
  color-scheme: light;
}
[data-theme="dark"] {
  --hf-bg: #0a0a0a;
  --hf-surface: #141414;
  --hf-surface-2: #1a1a1a;
  --hf-border: #2a2a2a;
  --hf-border-strong: #3a3a3a;
  --hf-fg: #e5e5e5;
  --hf-fg-secondary: #a0a0a0;
  --hf-fg-tertiary: #666666;
  --hf-heading: #f5f5f5;
  --hf-on-heading: #0a0a0a;
  --hf-code-bg: #141414;
  --hf-accent-green: #22c55e;
  --hf-accent-green-bg: rgba(34,197,94,0.10);
  --hf-accent-green-border: rgba(34,197,94,0.30);
  --hf-accent-blue: #3b82f6;
  --hf-accent-blue-bg: rgba(59,130,246,0.10);
  --hf-accent-blue-border: rgba(59,130,246,0.30);
  --hf-accent-purple: #a78bfa;
  --hf-accent-purple-bg: rgba(167,139,250,0.10);
  --hf-accent-purple-border: rgba(167,139,250,0.30);
  --hf-accent-red: #f87171;
  --hf-accent-red-bg: rgba(248,113,113,0.10);
  --hf-accent-red-border: rgba(248,113,113,0.30);
  --hf-accent-amber: #fbbf24;
  --hf-accent-amber-bg: rgba(251,191,36,0.10);
  --hf-accent-amber-border: rgba(251,191,36,0.30);
  --hf-selection: rgba(255,255,255,0.15);
  color-scheme: dark;
}
::selection { background: var(--hf-selection); }

/* ------------------------------------------------------------
   Burgundy text accent: landing page only (<html data-accent="burgundy"> is set by landing.html).
   Colours the hero's second line, mono labels, step numbers and links. Lines and borders stay neutral.
   ------------------------------------------------------------ */
:root { --hf-label: var(--hf-fg-tertiary); --hf-rule: var(--hf-heading); --hf-link: var(--hf-accent-blue); }
[data-accent="burgundy"] { --hf-accent-ink: #8C1C3A; --hf-label: var(--hf-accent-ink); --hf-link: var(--hf-accent-ink); }
[data-theme="dark"][data-accent="burgundy"] { --hf-accent-ink: #E58BA3; }

/* Soft neutral shadows for the landing page's cards and buttons */
:root { --hf-shadow: none; --hf-shadow-hover: none; --hf-shadow-btn: none; }
[data-accent="burgundy"] {
  --hf-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 10px 28px -14px rgba(10, 10, 10, 0.14);
  --hf-shadow-hover: 0 2px 4px rgba(10, 10, 10, 0.05), 0 18px 36px -14px rgba(10, 10, 10, 0.2);
  --hf-shadow-btn: 0 1px 2px rgba(10, 10, 10, 0.12), 0 6px 14px -6px rgba(10, 10, 10, 0.3);
}
[data-theme="dark"][data-accent="burgundy"] {
  --hf-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  --hf-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.55), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
  --hf-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Surfaces: classed cards plus the design's inline-styled cards (white surface + rounded corners) */
.card, .panel, .reading-card, .menu-pop,
[style*="background: var(--hf-surface)"][style*="border-radius: 12px"],
[style*="background: var(--hf-surface)"][style*="border-radius: 8px"][style*="border: 1px solid"] {
  box-shadow: var(--hf-shadow);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
a.card:hover, .hoverable:hover, .hover-border:hover, a[style*="border-radius: 8px"]:hover {
  box-shadow: var(--hf-shadow-hover);
}
.hf-btn.primary, button.primary { box-shadow: var(--hf-shadow-btn); }

/* Muse logo mark animation (from the landing design) */
@keyframes muse-orbit { to { transform: rotate(360deg); } }
@keyframes muse-core { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.muse-orbit { transform-origin: 12px 12px; animation: muse-orbit 4s linear infinite; }
.muse-core { animation: muse-core 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .muse-orbit, .muse-core { animation: none; } }

/* Design-system Button (components/Button) */
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 16px;
  font-size: 13px; font-weight: 500; line-height: 1; border-radius: 6px; cursor: pointer; font-family: var(--hf-font-body);
  border: 0; transition: all 150ms ease; user-select: none; text-decoration: none; white-space: nowrap; }
.hf-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.hf-btn.lg { height: 40px; padding: 0 20px; font-size: 15px; }
.hf-btn.primary { background: var(--hf-heading); color: var(--hf-on-heading); box-shadow: var(--hf-shadow-btn); }
.hf-btn.secondary { background: transparent; color: var(--hf-heading); border: 1px solid var(--hf-border); }
.hf-btn.ghost { background: transparent; color: var(--hf-fg-secondary); }
.hf-btn.danger { background: #ef4444; color: #ffffff; }
.hf-btn:hover { opacity: 0.85; }
.hf-btn.secondary:hover { border-color: var(--hf-border-strong); opacity: 1; }
.hf-btn:disabled { opacity: 0.5; cursor: default; }

/* Design-system Badge (components/Badge) */
.hf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font-size: 12px;
  font-weight: 500; line-height: 1.4; font-family: var(--hf-font-body); white-space: nowrap;
  color: var(--hf-accent-green); background: var(--hf-accent-green-bg); border: 1px solid var(--hf-accent-green-border); }
.hf-badge.blue { color: var(--hf-accent-blue); background: var(--hf-accent-blue-bg); border-color: var(--hf-accent-blue-border); }
.hf-badge.purple { color: var(--hf-accent-purple); background: var(--hf-accent-purple-bg); border-color: var(--hf-accent-purple-border); }
.hf-badge.neutral { color: var(--hf-fg-secondary); background: var(--hf-surface); border-color: var(--hf-border); }
.hf-badge.red { color: var(--hf-accent-red); background: var(--hf-accent-red-bg); border-color: var(--hf-accent-red-border); }
.hf-badge.amber { color: var(--hf-accent-amber); background: var(--hf-accent-amber-bg); border-color: var(--hf-accent-amber-border); }