/* Shared landing-page foundation from DESIGN.md v0.1.1. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-variable.woff2') format('woff2');
}

:root {
  --surface-page: #f4f7fc;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafd;
  --surface-interactive: #eef3f9;
  --text-primary: #1c2b44;
  --text-strong: #17233a;
  --text-muted: #566982;
  --accent-text: #285fcf;
  --accent-text-hover: #214faf;
  --accent-soft: rgba(47, 99, 215, 0.10);
  --action-primary: #2f63d7;
  --action-primary-hover: #285fcf;
  --action-primary-pressed: #214faf;
  --text-on-accent: #ffffff;
  --status-paid: #187c4b;
  --status-paid-bg: #f6faf8;
  --status-pending: #956000;
  --status-pending-bg: #fbf9f5;
  --status-error: #b7335c;
  --shadow-card: 0 6px 32px -8px rgba(29, 53, 89, 0.1);
  --accent-border: rgba(47, 99, 215, 0.4);
  --shadow-floating: 0 8px 24px rgba(29, 53, 89, 0.16);
  --page-glow-primary: rgba(59, 110, 255, 0.12);
  --page-glow-secondary: rgba(107, 147, 255, 0.04);
  --page-grid: rgba(29, 53, 89, 0.035);
  --profile-grid: rgba(29, 53, 89, 0.055);
  --profile-surface-hover: rgba(29, 53, 89, 0.055);
  --profile-action-primary: #2f63d7;
  --profile-text-base: #17233a;
  --border: rgba(29, 53, 89, 0.13);
  --border-strong: rgba(29, 53, 89, 0.23);
  --control-border: #5c6f86;
  --focus-ring: #285fcf;
  /* Actor colors preserve the diagram's meaning, separately from status. */
  --actor-fan: #187c4b;
  --actor-fan-bg: #f6faf8;
  --actor-creator: var(--accent-text);
  --actor-platform: var(--text-strong);
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --type-display-l: 2.75rem;
  --type-display-m: 2rem;
  --type-display-s: 1.5rem;
  --type-heading: 1.125rem;
  --type-reading: 1rem;
  --type-body-m: 0.875rem;
  --type-body-s: 0.8125rem;
  --type-body-xs: 0.75rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
  font-family: var(--font-body);
  font-feature-settings: normal;
  color: var(--text-primary);
  background: var(--surface-page);
}

/* System appearance works before JavaScript and follows device changes. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    --surface-page: #040a18;
    --surface-raised: #070f22;
    --surface-subtle: #09132a;
    --surface-interactive: #0b162c;
    --text-primary: #eef1f8;
    --text-strong: #ffffff;
    --text-muted: #8c9ab5;
    --accent-text: #6c93ff;
    --accent-text-hover: #9fb8ff;
    --accent-soft: rgba(59, 110, 255, 0.09);
    --status-paid: #5fe89a;
    --status-paid-bg: #0e202c;
    --status-pending: #ffd160;
    --status-pending-bg: #1b1f27;
    --status-error: #ff6a90;
    --shadow-card: 0 6px 32px -8px rgba(0, 0, 0, 0.24);
    --accent-border: rgba(108, 147, 255, 0.42);
    --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.35);
    --page-glow-primary: rgba(59, 110, 255, 0.28);
    --page-glow-secondary: rgba(107, 147, 255, 0.10);
    --page-grid: rgba(255, 255, 255, 0.025);
    --profile-grid: rgba(255, 255, 255, 0.045);
    --profile-surface-hover: rgba(255, 255, 255, 0.04);
    --profile-action-primary: #3b6eff;
    --profile-text-base: #eef1f8;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --focus-ring: #6c93ff;
    --actor-fan: #5fe89a;
    --actor-fan-bg: #0e202c;
    color-scheme: dark;
  }
}
html[data-theme='dark'] {
  --surface-page: #040a18;
  --surface-raised: #070f22;
  --surface-subtle: #09132a;
  --surface-interactive: #0b162c;
  --text-primary: #eef1f8;
  --text-strong: #ffffff;
  --text-muted: #8c9ab5;
  --accent-text: #6c93ff;
  --accent-text-hover: #9fb8ff;
  --accent-soft: rgba(59, 110, 255, 0.09);
  --status-paid: #5fe89a;
  --status-paid-bg: #0e202c;
  --status-pending: #ffd160;
  --status-pending-bg: #1b1f27;
  --status-error: #ff6a90;
  --shadow-card: 0 6px 32px -8px rgba(0, 0, 0, 0.24);
  --accent-border: rgba(108, 147, 255, 0.42);
  --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.35);
  --page-glow-primary: rgba(59, 110, 255, 0.28);
  --page-glow-secondary: rgba(107, 147, 255, 0.10);
  --page-grid: rgba(255, 255, 255, 0.025);
  --profile-grid: rgba(255, 255, 255, 0.045);
  --profile-surface-hover: rgba(255, 255, 255, 0.04);
  --profile-action-primary: #3b6eff;
  --profile-text-base: #eef1f8;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --focus-ring: #6c93ff;
  --actor-fan: #5fe89a;
  --actor-fan-bg: #0e202c;
  color-scheme: dark;
}