/* Fomomento Design System — Monochromatic / Black Hole */

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ========================================================================
     CANONICAL TOKENS — match the real app (packages/types/src/tokens.ts).
     Author CSS with THESE names. The legacy --fm-* shorthands at the bottom
     are kept as aliases only so older files keep rendering — don't author new.
     ======================================================================== */

  /* ---- Semantic neutrals (reach for these first) ---- */
  --fm-fg:      #0A0A0B;  /* ink: primary text · filled-button bg · active fills · focus ring */
  --fm-bg:      #FAFAF8;  /* page bg · card/surface/panel/peek bg · inputs */
  --fm-muted:   #76767D;  /* secondary/dimmed text · icons · placeholders · meta · kickers */
  --fm-border:  #C9C9CD;  /* borders · dividers · input outlines · separators */
  --fm-subtle:  #EDEDEE;  /* subtle fills · hover bg · segmented track · skeleton · "no image" */

  /* ---- Neutral scale (raw stops — only when a semantic token won't do) ---- */
  --fm-neutral-paper: #FAFAF8;
  --fm-neutral-100:   #EDEDEE;
  --fm-neutral-200:   #C9C9CD;
  --fm-neutral-300:   #A0A0A6;
  --fm-neutral-400:   #76767D;
  --fm-neutral-500:   #56565C;
  --fm-neutral-600:   #3A3A40;
  --fm-neutral-800:   #1E1E22;
  --fm-neutral-900:   #17171A;
  --fm-neutral-ink:   #0A0A0B;

  /* ---- State colors (always -solid for text/icon/border, -soft for fills) ---- */
  --fm-success-solid: #2E5E3E;  --fm-success-soft: #EEF2ED;
  --fm-warning-solid: #8A6A1F;  --fm-warning-soft: #F5EFE1;
  --fm-error-solid:   #8B2E2E;  --fm-error-soft:   #F4EAE8;
  --fm-progress-solid:#2F5774;  --fm-progress-soft:#E8F1F7;
  /* dark-mode swaps (the app substitutes these automatically; harmless here) */
  --fm-success-dark: #7FB590; --fm-success-dark-soft: #1A2820;
  --fm-warning-dark: #D4B26A; --fm-warning-dark-soft: #2A2318;
  --fm-error-dark:   #D08A8A; --fm-error-dark-soft:   #2A1C1C;
  --fm-progress-dark:#88B0CB; --fm-progress-dark-soft:#182431;

  /* ---- Type ---- */
  --fm-font-display: 'Cal Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --fm-font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fm-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fm-font-size-xs:  12px; --fm-font-size-sm:  14px; --fm-font-size-md:  16px;
  --fm-font-size-lg:  18px; --fm-font-size-xl:  20px; --fm-font-size-2xl: 24px;
  --fm-font-size-3xl: 30px; --fm-font-size-4xl: 36px;
  --fm-font-weight-regular: 400; --fm-font-weight-medium: 500;
  --fm-font-weight-semibold: 600; --fm-font-weight-bold: 700;

  /* ---- Radius ---- */
  --fm-radius-xs: 4px; --fm-radius-sm: 6px; --fm-radius-md: 10px;
  --fm-radius-lg: 14px; --fm-radius-xl: 20px; --fm-radius-full: 9999px;

  /* ---- Spacing (4px scale) ---- */
  --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-7: 28px; --fm-space-8: 32px;
  --fm-space-9: 36px; --fm-space-10: 40px; --fm-space-11: 44px; --fm-space-12: 48px;

  /* Event horizon — the one gradient */
  --fm-horizon: radial-gradient(circle at 50% 50%,
    #000 0%, #000 34%,
    #1a1a1d 42%,
    #4a4a4e 48%,
    #d8d8d2 52%,
    #f6f6f2 56%,
    #a0a0a0 64%,
    #2a2a2d 78%,
    #0a0a0b 100%);
  --fm-horizon-soft: radial-gradient(ellipse at 50% 55%,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.0) 40%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.15) 58%,
    rgba(0,0,0,0) 75%);

  /* Shadows — soft, like lensing */
  --fm-shadow-sm: 0 1px 2px rgba(10,10,11,0.06), 0 1px 1px rgba(10,10,11,0.04);
  --fm-shadow-md: 0 4px 12px rgba(10,10,11,0.06), 0 1px 2px rgba(10,10,11,0.04);
  --fm-shadow-lg: 0 20px 40px -12px rgba(10,10,11,0.12), 0 2px 6px rgba(10,10,11,0.04);
  --fm-shadow-ring: inset 0 0 0 1px var(--fm-border);

  /* Motion */
  --fm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fm-ease-grav: cubic-bezier(0.65, 0, 0.35, 1);

  /* ========================================================================
     LEGACY ALIASES — do not author new usages. Kept so pre-canonical files
     (shell.css, components.css, older JSX) resolve to the right values.
     ======================================================================== */
  --fm-ink: var(--fm-fg);  --fm-void: var(--fm-fg);  --fm-black: var(--fm-fg);
  --fm-paper: var(--fm-bg); --fm-white: var(--fm-bg); --fm-50: var(--fm-bg);
  --fm-100: var(--fm-subtle); --fm-150: var(--fm-border); --fm-200: var(--fm-border);
  --fm-300: var(--fm-neutral-300); --fm-400: var(--fm-muted); --fm-500: var(--fm-neutral-500);
  --fm-600: var(--fm-neutral-600); --fm-700: var(--fm-neutral-600);
  --fm-800: var(--fm-neutral-800); --fm-900: var(--fm-neutral-900);
  --fm-success: var(--fm-success-solid); --fm-warning: var(--fm-warning-solid);
  --fm-error: var(--fm-error-solid); --fm-progress: var(--fm-progress-solid);
  --fm-display: var(--fm-font-display); --fm-sans: var(--fm-font-body); --fm-mono: var(--fm-font-mono);
  --fm-r-xs: var(--fm-radius-xs); --fm-r-sm: var(--fm-radius-sm); --fm-r-md: var(--fm-radius-md);
  --fm-r-lg: var(--fm-radius-lg); --fm-r-xl: var(--fm-radius-xl); --fm-r-full: var(--fm-radius-full);
}

/* Base */
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; }

.fm {
  font-family: var(--fm-sans);
  color: var(--fm-ink);
  background: var(--fm-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

.fm-dark {
  color: var(--fm-100);
  background: var(--fm-black);
}

/* Typography utilities */
.fm-display { font-family: var(--fm-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; }
.fm-mono { font-family: var(--fm-mono); font-feature-settings: "ss01"; }

.fm-h1 { font-family: var(--fm-display); font-size: 96px; line-height: 0.92; letter-spacing: -0.035em; }
.fm-h2 { font-family: var(--fm-display); font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; }
.fm-h3 { font-family: var(--fm-display); font-size: 40px; line-height: 1.0; letter-spacing: -0.025em; }
.fm-h4 { font-family: var(--fm-display); font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
.fm-body-lg { font-size: 18px; line-height: 1.55; color: var(--fm-500); }
.fm-body { font-size: 15px; line-height: 1.55; color: var(--fm-500); }
.fm-body-sm { font-size: 13px; line-height: 1.5; color: var(--fm-500); }
.fm-caption { font-family: var(--fm-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fm-400); }
.fm-label { font-family: var(--fm-mono); font-size: 10px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fm-400); }

/* Orbital rings — subtle decorative border */
.fm-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--fm-200);
  pointer-events: none;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--fm-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Scrollbar - minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fm-200); border-radius: 10px; border: 2px solid var(--fm-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--fm-400); }

/* Keyframes */
@keyframes fm-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fm-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes fm-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}