/*
  Muse Mobile — design tokens.
  Mobile-only: does not touch ../styles/tokens.css (the extension's token
  file). Brand colors are fixed per spec — Blush, Black, Raspberry, Lilac.
*/
:root {
  --muse-blush: #FBEFF1;
  --muse-black: #111111;
  --muse-raspberry: #C44569;
  --muse-lilac: #C9B8E8;

  --muse-bg: var(--muse-blush);
  --muse-surface: #FFFFFF;
  --muse-surface-soft: #F3ECF7;
  --muse-ink: var(--muse-black);
  --muse-ink-soft: rgba(17, 17, 17, 0.62);
  --muse-ink-faint: rgba(17, 17, 17, 0.38);
  --muse-border: rgba(17, 17, 17, 0.1);

  --muse-accent: var(--muse-raspberry);
  --muse-accent-ink: #FFFFFF;
  --muse-secondary: var(--muse-lilac);
  --muse-secondary-ink: var(--muse-black);

  --muse-status-positive: #8BA888;
  --muse-status-negative: #D98A9E;

  --muse-radius-sm: 8px;
  --muse-radius-md: 14px;
  --muse-radius-lg: 20px;
  --muse-radius-pill: 999px;

  --muse-space-1: 4px;
  --muse-space-2: 8px;
  --muse-space-3: 12px;
  --muse-space-4: 16px;
  --muse-space-5: 24px;
  --muse-space-6: 32px;

  --muse-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --muse-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --muse-font-size-xs: 12px;
  --muse-font-size-sm: 13px;
  --muse-font-size-base: 15px;
  --muse-font-size-md: 17px;
  --muse-font-size-lg: 22px;
  --muse-font-size-xl: 28px;

  --muse-shadow-card: 0 1px 2px rgba(17, 17, 17, 0.05), 0 8px 24px rgba(17, 17, 17, 0.08);
  --muse-nav-height: 60px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--muse-font);
  background: var(--muse-bg);
  color: var(--muse-ink);
  font-size: var(--muse-font-size-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button,
input,
select {
  font-family: inherit;
}

.muse-wordmark {
  height: 20px;
  width: auto;
  object-fit: contain;
  display: block;
}

.muse-card {
  background: var(--muse-surface);
  border-radius: var(--muse-radius-lg);
  box-shadow: var(--muse-shadow-card);
}

.muse-surface {
  background: var(--muse-surface-soft);
  border-radius: var(--muse-radius-md);
}

.muse-btn {
  font-family: var(--muse-font);
  font-size: var(--muse-font-size-base);
  font-weight: 600;
  border: none;
  border-radius: var(--muse-radius-md);
  padding: 14px var(--muse-space-4);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}

.muse-btn:active {
  transform: scale(0.98);
  opacity: 0.85;
}

.muse-btn-primary {
  background: var(--muse-ink);
  color: var(--muse-bg);
}

.muse-btn-secondary {
  background: var(--muse-surface);
  color: var(--muse-ink);
  border: 1px solid var(--muse-border);
}

.muse-btn-accent {
  background: var(--muse-accent);
  color: var(--muse-accent-ink);
}

.muse-btn-text {
  background: transparent;
  color: var(--muse-ink-soft);
  padding: var(--muse-space-2) 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.muse-btn:disabled {
  background: var(--muse-border);
  color: var(--muse-ink-faint);
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

.muse-input {
  font-family: var(--muse-font);
  font-size: var(--muse-font-size-base);
  border: 1px solid var(--muse-border);
  border-radius: var(--muse-radius-sm);
  padding: 12px var(--muse-space-3);
  background: var(--muse-surface);
  color: var(--muse-ink);
  width: 100%;
}

.muse-input:focus {
  outline: 2px solid var(--muse-ink);
  outline-offset: 1px;
}

.muse-label {
  font-size: var(--muse-font-size-sm);
  color: var(--muse-ink-soft);
  margin-bottom: var(--muse-space-1);
  display: block;
}

.muse-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--muse-font-size-xs);
  font-weight: 600;
  background: var(--muse-secondary);
  color: var(--muse-secondary-ink);
  border-radius: var(--muse-radius-pill);
  padding: 3px var(--muse-space-2);
}

.muse-error {
  color: var(--muse-accent);
  font-size: var(--muse-font-size-sm);
}