@charset "UTF-8";
/**
 * flomotion Design System v2.0 -- CSS Variables
 *
 * Single source of truth for Web (Next.js), CMS, and any HTML surface.
 * Generated from design-system/tokens.json -- keep in sync.
 *
 * Principles: Editorial - Quiet - Organic - Modern - Clean.
 */

:root {
  /* -- COLOR - Ink (text) ---------------------------------------- */
  --fm-ink-900: #0a0a0a;
  --fm-ink-800: #1a1a1a;
  --fm-ink-600: #4a4a48;
  --fm-ink-500: #6b6b68;
  --fm-ink-400: #8e8e8a;
  --fm-ink-300: #a8a8a3;
  --fm-ink-200: #c8c8c2;
  --fm-ink-100: #e8e6e0;
  --fm-ink-50:  #f4f4f2;

  /* COLOR - Paper (backgrounds)*/
  --fm-paper-warm:    #fafaf9;
  --fm-paper-warmer:  #f4f4f2;
  --fm-paper-card:    #ffffff;
  --fm-paper-ink:     #0a0a0a;
  --fm-paper-ink-soft:#131313;
  --fm-paper-ink-card:#1a1a1a;

  /* COLOR - Accent*/
  --fm-accent:        #5cbcbc;
  --fm-accent-deep:   #3a8e8e;
  --fm-accent-sage:   #8a9770;
  --fm-accent-lavender:#bba7e4;
  --fm-accent-rose:   #d4afa0;
  --fm-accent-blue:   #4a66cc;
  --fm-accent-amber:  #e6c44a;

  /* COLOR - Semantic*/
  --fm-success: #7aa67a;
  --fm-warning: #d4a03c;
  --fm-error:   #c84141;
  --fm-info:    #5cbcbc;

  /* COLOR - Lines*/
  --fm-line-soft: rgba(0,0,0,0.06);
  --fm-line-med:  rgba(0,0,0,0.12);

  /* SEMANTIC TOKENS - Light Mode (default)*/
  --fm-bg:        var(--fm-paper-warm);
  --fm-bg-soft:   var(--fm-paper-warmer);
  --fm-bg-card:   var(--fm-paper-card);
  --fm-text:      var(--fm-ink-900);
  --fm-text-soft: var(--fm-ink-500);
  --fm-text-faint:var(--fm-ink-300);
  --fm-line:      var(--fm-line-soft);
  --fm-line-strong: var(--fm-line-med);

  /* TYPE - Families*/
  --fm-font-serif:    "New York", "Iowan Old Style", Georgia, serif;
  --fm-font-sans:     -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --fm-font-text:     -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --fm-font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE - Sizes*/
  --fm-text-11: 11px;
  --fm-text-12: 12px;
  --fm-text-13: 13px;
  --fm-text-14: 14px;
  --fm-text-15: 15px;
  --fm-text-16: 16px;
  --fm-text-17: 17px;
  --fm-text-19: 19px;
  --fm-text-21: 21px;
  --fm-text-24: 24px;
  --fm-text-28: 28px;
  --fm-text-32: 32px;
  --fm-text-40: 40px;
  --fm-text-48: 48px;
  --fm-text-60: 60px;
  --fm-text-76: 76px;
  --fm-text-96: 96px;

  /* TYPE - Other*/
  --fm-leading-tight:   1.05;
  --fm-leading-snug:    1.2;
  --fm-leading-normal:  1.4;
  --fm-leading-relaxed: 1.55;
  --fm-leading-loose:   1.7;

  --fm-track-tighter: -0.03em;
  --fm-track-tight:   -0.02em;
  --fm-track-snug:    -0.01em;
  --fm-track-normal:  0em;
  --fm-track-wide:    0.04em;
  --fm-track-wider:   0.1em;
  --fm-track-widest:  0.14em;

  /* SPACE (8pt grid)*/
  --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-space-12: 48px;
  --fm-space-16: 64px;
  --fm-space-20: 80px;
  --fm-space-24: 96px;
  --fm-space-32: 128px;
  --fm-space-40: 160px;

  /* RADIUS*/
  --fm-radius-sm:   6px;
  --fm-radius-md:   10px;
  --fm-radius-lg:   16px;
  --fm-radius-xl:   22px;
  --fm-radius-2xl:  32px;
  --fm-radius-pill: 999px;

  /* SHADOW*/
  --fm-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --fm-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --fm-shadow-md: 0 1px 2px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06);
  --fm-shadow-lg: 0 1px 2px rgba(0,0,0,0.06), 0 12px 48px rgba(0,0,0,0.08);
  --fm-shadow-xl: 0 1px 3px rgba(0,0,0,0.08), 0 24px 80px rgba(0,0,0,0.12);

  /* MOTION*/
  --fm-duration-instant: 100ms;
  --fm-duration-fast:    180ms;
  --fm-duration-normal:  260ms;
  --fm-duration-slow:    420ms;
  --fm-duration-slower:  640ms;
  --fm-duration-ambient: 1200ms;

  --fm-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --fm-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --fm-ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --fm-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --fm-ease-organic: cubic-bezier(0.22, 1, 0.36, 1);

  /* BLUR*/
  --fm-blur-sm: 8px;
  --fm-blur-md: 16px;
  --fm-blur-lg: 32px;
  --fm-blur-xl: 60px;

  /* Z-INDEX*/
  --fm-z-base:    1;
  --fm-z-raised:  10;
  --fm-z-sticky:  100;
  --fm-z-drawer:  200;
  --fm-z-modal:   300;
  --fm-z-toast:   400;
  --fm-z-tooltip: 500;
}

/* Dark Mode (auto via OS preference)*/
@media (prefers-color-scheme: dark) {
  :root {
    --fm-bg:        var(--fm-paper-ink);
    --fm-bg-soft:   var(--fm-paper-ink-soft);
    --fm-bg-card:   var(--fm-paper-ink-card);
    --fm-text:      #fafaf9;
    --fm-text-soft: var(--fm-ink-300);
    --fm-text-faint:#5b5b58;
    --fm-line:      rgba(255,255,255,0.08);
    --fm-line-strong: rgba(255,255,255,0.14);
    --fm-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
    --fm-shadow-md: 0 1px 2px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.4);
    --fm-shadow-lg: 0 1px 2px rgba(0,0,0,0.6), 0 12px 48px rgba(0,0,0,0.5);
    --fm-shadow-xl: 0 1px 3px rgba(0,0,0,0.7), 0 24px 80px rgba(0,0,0,0.6);
  }
}

/* Manual override classes (for force-light/dark sections) */
[data-fm-theme="light"] {
  --fm-bg:        var(--fm-paper-warm);
  --fm-bg-soft:   var(--fm-paper-warmer);
  --fm-bg-card:   var(--fm-paper-card);
  --fm-text:      var(--fm-ink-900);
  --fm-text-soft: var(--fm-ink-500);
  --fm-text-faint:var(--fm-ink-300);
  --fm-line:      var(--fm-line-soft);
}
[data-fm-theme="dark"] {
  --fm-bg:        var(--fm-paper-ink);
  --fm-bg-soft:   var(--fm-paper-ink-soft);
  --fm-bg-card:   var(--fm-paper-ink-card);
  --fm-text:      #fafaf9;
  --fm-text-soft: var(--fm-ink-300);
  --fm-text-faint:#5b5b58;
  --fm-line:      rgba(255,255,255,0.08);
}

/* Type style mixins (use as class)*/
.fm-display {
  font-family: var(--fm-font-serif);
  font-size: clamp(48px, 8vw, var(--fm-text-96));
  font-weight: 400;
  line-height: var(--fm-leading-tight);
  letter-spacing: var(--fm-track-tight);
}
.fm-h1 {
  font-family: var(--fm-font-serif);
  font-size: clamp(32px, 5vw, var(--fm-text-48));
  font-weight: 400;
  line-height: var(--fm-leading-snug);
  letter-spacing: var(--fm-track-tight);
}
.fm-h2 {
  font-family: var(--fm-font-serif);
  font-size: clamp(24px, 3.5vw, var(--fm-text-32));
  font-weight: 400;
  line-height: var(--fm-leading-snug);
  letter-spacing: var(--fm-track-snug);
}
.fm-h3 {
  font-family: var(--fm-font-serif);
  font-size: var(--fm-text-24);
  font-weight: 400;
  line-height: var(--fm-leading-snug);
  letter-spacing: var(--fm-track-snug);
}
.fm-lead {
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-19);
  line-height: var(--fm-leading-relaxed);
  color: var(--fm-text-soft);
}
.fm-body {
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-16);
  line-height: var(--fm-leading-relaxed);
}
.fm-caption {
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-13);
  line-height: var(--fm-leading-normal);
  color: var(--fm-text-soft);
}
.fm-eyebrow {
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-11);
  font-weight: 500;
  line-height: var(--fm-leading-normal);
  letter-spacing: var(--fm-track-widest);
  text-transform: uppercase;
  color: var(--fm-text-faint);
}
.fm-label {
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-14);
  font-weight: 500;
  line-height: var(--fm-leading-normal);
}

/* Reduced motion respects user preference*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}