/*
 * FanMassive approved UI foundation, Phase 1.
 *
 * This file is intentionally not imported by a production surface. It defines
 * only namespaced semantic tokens and accessibility primitives. Screen and
 * component migration requires a separately approved phase.
 */

:root {
  --fm-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fm-font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fm-font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;

  --fm-space-1: 4px;
  --fm-space-2: 8px;
  --fm-space-3: 12px;
  --fm-space-4: 16px;
  --fm-space-5: 20px;
  --fm-space-6: 24px;
  --fm-space-8: 32px;
  --fm-space-10: 40px;

  --fm-radius-xs: 6px;
  --fm-radius-sm: 8px;
  --fm-radius-md: 12px;
  --fm-radius-lg: 16px;
  --fm-radius-xl: 22px;
  --fm-radius-pill: 999px;

  --fm-shadow-sm: 0 2px 8px rgba(10, 12, 16, 0.12);
  --fm-shadow-md: 0 12px 24px -10px rgba(10, 12, 16, 0.28);
  --fm-shadow-lg: 0 20px 40px -18px rgba(10, 12, 16, 0.45);

  --fm-status-live: #ff3d5a;
  --fm-status-success: #14b87a;
  --fm-status-warning: #e3a73b;
  --fm-status-danger: #e5484d;
  --fm-status-info: #4c8dff;

  --fm-motion-fast: 150ms;
  --fm-motion-standard: 220ms;
  --fm-focus-width: 3px;
}

[data-fm-role="fan"] {
  color-scheme: light;
  --fm-color-primary: #2454e8;
  --fm-color-primary-strong: #12308f;
  --fm-color-primary-soft: #e8edfc;
  --fm-color-secondary: #14b87a;
  --fm-color-secondary-strong: #0b7f53;
  --fm-color-secondary-soft: #e1f8ee;
  --fm-color-accent: #e8a23d;
  --fm-color-canvas: #f5f6fa;
  --fm-color-surface: #ffffff;
  --fm-color-text: #12151c;
  --fm-color-text-soft: #4a5164;
  --fm-color-text-muted: #7a8194;
  --fm-color-border: #e4e6ee;
  --fm-color-border-strong: #d5d8e4;
  --fm-color-focus: #2454e8;
}

[data-fm-role="creator"] {
  color-scheme: light;
  --fm-color-primary: #7c3aed;
  --fm-color-primary-strong: #5b21b6;
  --fm-color-secondary: #c026d3;
  --fm-color-secondary-strong: #3e1a78;
  --fm-color-accent: #ec4899;
  --fm-color-canvas: #f4eefc;
  --fm-color-surface: #ffffff;
  --fm-color-text: #1b1129;
  --fm-color-text-soft: #5c4c74;
  --fm-color-text-muted: #8b7ba3;
  --fm-color-border: #e7def5;
  --fm-color-focus: #7c3aed;
}

[data-fm-role="admin"] {
  color-scheme: dark;
  --fm-color-primary: #d4af37;
  --fm-color-primary-strong: #9c7a1e;
  --fm-color-secondary: #f1c84b;
  --fm-color-secondary-strong: #f1e6c8;
  --fm-color-accent: #d4af37;
  --fm-color-canvas: #16161a;
  --fm-color-surface: #1f2024;
  --fm-color-text: #ffffff;
  --fm-color-text-soft: #c7c9d1;
  --fm-color-text-muted: #8e909c;
  --fm-color-border: rgba(255, 255, 255, 0.09);
  --fm-color-focus: #f1c84b;
}

.fm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-fm-role] :focus-visible {
  outline: var(--fm-focus-width) solid var(--fm-color-focus);
  outline-offset: 2px;
}

.fm-tabular {
  font-family: var(--fm-font-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  [data-fm-role] *,
  [data-fm-role] *::before,
  [data-fm-role] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}