/* =============================================================================
 * Flyplab Design System — Colors & Type
 * Reskin: Railway.com aesthetic + Flyplab's emerald green (#2BB45D)
 * Sourced verbatim from claude.ai/design handoff (flyplab-reskin/project/tokens.css).
 * Do NOT edit casually — this is the canonical token file. Adjust the design
 * package + re-port instead.
 * ============================================================================= */

:root {
  /* ---------- BRAND ---------- */
  --fp-green:        #2BB45D;   /* primary accent — buttons, links, active */
  --fp-green-hi:     #38D272;   /* hover/lift */
  --fp-green-lo:     #1F8E47;   /* press */
  --fp-green-soft:   rgba(43, 180, 93, 0.12);
  --fp-green-glow:   rgba(43, 180, 93, 0.35);

  /* ---------- SURFACES (dark, Railway-style) ---------- */
  --fp-bg-0:         #0B0D12;   /* deepest — page canvas */
  --fp-bg-1:         #11141B;   /* panels, sidebar */
  --fp-bg-2:         #161A22;   /* cards */
  --fp-bg-3:         #1D222C;   /* raised / hover */
  --fp-bg-4:         #252B37;   /* pressed / active row */
  --fp-bg-modal:     #181C25;   /* modal sheets */

  /* ---------- BORDERS ---------- */
  --fp-border:       #232936;   /* default 1px hairline */
  --fp-border-soft:  #1B2029;   /* on dark cards */
  --fp-border-loud:  #313847;   /* hovered / focused */
  --fp-border-green: rgba(43, 180, 93, 0.5);

  /* ---------- TEXT ---------- */
  --fp-fg-1:         #F2F4F7;   /* primary text */
  --fp-fg-2:         #B7BDC9;   /* secondary */
  --fp-fg-3:         #7B8595;   /* tertiary, captions */
  --fp-fg-4:         #545B6A;   /* muted, disabled */
  --fp-fg-link:      var(--fp-green);

  /* ---------- SEMANTIC ---------- */
  --fp-success:      #2BB45D;
  --fp-success-bg:   rgba(43, 180, 93, 0.12);
  --fp-warn:         #F5A524;
  --fp-warn-bg:      rgba(245, 165, 36, 0.14);
  --fp-danger:       #F0506C;
  --fp-danger-bg:    rgba(240, 80, 108, 0.14);
  --fp-info:         #6FA8FF;
  --fp-info-bg:      rgba(111, 168, 255, 0.14);

  /* ---------- DATA / STATUS DOTS ---------- */
  --fp-dot-online:   #2BB45D;
  --fp-dot-build:    #F5A524;
  --fp-dot-error:    #F0506C;
  --fp-dot-idle:     #545B6A;

  /* ---------- TYPE ---------- */
  --fp-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fp-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fp-font-display: 'Inter', sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --fp-text-xs:   11px;   /* labels, meta */
  --fp-text-sm:   12px;   /* secondary */
  --fp-text-base: 13px;   /* body */
  --fp-text-md:   14px;   /* primary body */
  --fp-text-lg:   16px;   /* card titles */
  --fp-text-xl:   20px;   /* section headers */
  --fp-text-2xl:  28px;   /* page titles */
  --fp-text-3xl:  36px;   /* display */
  --fp-text-4xl:  48px;   /* hero */

  --fp-leading-tight:  1.2;
  --fp-leading-normal: 1.45;
  --fp-leading-loose:  1.6;

  /* ---------- SPACING ---------- */
  --fp-space-1:  4px;
  --fp-space-2:  8px;
  --fp-space-3:  12px;
  --fp-space-4:  16px;
  --fp-space-5:  20px;
  --fp-space-6:  24px;
  --fp-space-8:  32px;
  --fp-space-10: 40px;
  --fp-space-12: 48px;
  --fp-space-16: 64px;

  /* ---------- RADII ---------- */
  --fp-r-sm:  4px;   /* badges, chips */
  --fp-r-md:  6px;   /* buttons, inputs */
  --fp-r-lg:  8px;   /* cards */
  --fp-r-xl:  12px;  /* modals, big cards */
  --fp-r-2xl: 16px;  /* feature cards */
  --fp-r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --fp-shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --fp-shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --fp-shadow-lg:  0 12px 32px rgba(0,0,0,0.45);
  --fp-shadow-xl:  0 24px 60px rgba(0,0,0,0.55);
  --fp-shadow-pop: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--fp-border);
  --fp-glow-green: 0 0 0 1px var(--fp-border-green), 0 0 24px var(--fp-green-glow);

  /* ---------- MOTION ---------- */
  --fp-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --fp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --fp-dur-fast:    120ms;
  --fp-dur-base:    180ms;
  --fp-dur-slow:    280ms;
}

/* =============================================================================
 * SEMANTIC TYPE
 * ============================================================================= */

.fp-h1, h1.fp { font: 600 var(--fp-text-3xl)/var(--fp-leading-tight) var(--fp-font-display); letter-spacing: -0.02em; color: var(--fp-fg-1); }
.fp-h2, h2.fp { font: 600 var(--fp-text-2xl)/var(--fp-leading-tight) var(--fp-font-display); letter-spacing: -0.015em; color: var(--fp-fg-1); }
.fp-h3, h3.fp { font: 600 var(--fp-text-xl)/var(--fp-leading-tight) var(--fp-font-display); letter-spacing: -0.01em; color: var(--fp-fg-1); }
.fp-h4, h4.fp { font: 600 var(--fp-text-lg)/var(--fp-leading-tight) var(--fp-font-sans); color: var(--fp-fg-1); }

.fp-body  { font: 400 var(--fp-text-md)/var(--fp-leading-normal) var(--fp-font-sans); color: var(--fp-fg-2); }
.fp-small { font: 400 var(--fp-text-sm)/var(--fp-leading-normal) var(--fp-font-sans); color: var(--fp-fg-3); }
.fp-meta  {
  font: 500 var(--fp-text-xs)/1 var(--fp-font-sans);
  color: var(--fp-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fp-mono { font-family: var(--fp-font-mono); font-feature-settings: 'tnum'; }
.fp-stat {
  font-family: var(--fp-font-mono);
  font-weight: 600;
  font-feature-settings: 'tnum';
  color: var(--fp-fg-1);
}

.fp-link {
  color: var(--fp-fg-link);
  text-decoration: none;
  transition: color var(--fp-dur-fast) var(--fp-ease);
}
.fp-link:hover { color: var(--fp-green-hi); }

.fp-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font: 500 11px/1 var(--fp-font-mono);
  color: var(--fp-fg-2);
  background: var(--fp-bg-3);
  border: 1px solid var(--fp-border);
  border-radius: 4px;
}

/* =============================================================================
 * LIGHT-MODE OVERRIDES
 * Flips the --fp-* surface / border / text tokens for body.light-mode. The
 * legacy --bg-* / --text-* aliases were already overridden in app_raw.jsx's
 * style block; this block extends that to the canonical --fp-* token family
 * so every component using --fp-fg-2 / --fp-bg-1 / --fp-border / etc. flips
 * automatically when the user toggles to light mode.
 *
 * Without this block, sidebar icons (which inherit color via
 * fill="currentColor" + color: var(--fp-fg-2)) render at #B7BDC9 on white
 * and become near-invisible. Same for sidebar text, badges, active rows,
 * and every chip/border that reads --fp-* directly.
 *
 * If/when the claude.ai/design handoff publishes its own light-mode tokens,
 * this block should be replaced by the re-ported design package per the
 * note at the top of this file. Until then, keep these mappings in sync.
 * ============================================================================= */
body.light-mode {
  /* SURFACES — light-mode mirror of the dark Railway-style stack */
  --fp-bg-0:         #F1F5F9;   /* page canvas — matches legacy --bg-base */
  --fp-bg-1:         #FFFFFF;   /* panels, sidebar */
  --fp-bg-2:         #F8FAFC;   /* cards */
  --fp-bg-3:         #E2E8F0;   /* raised / hover */
  --fp-bg-4:         #CBD5E1;   /* pressed / active row */
  --fp-bg-modal:     #FFFFFF;   /* modal sheets */

  /* BORDERS */
  --fp-border:       #CBD5E1;   /* default 1px hairline */
  --fp-border-soft:  #E2E8F0;   /* on light cards */
  --fp-border-loud:  #94A3B8;   /* hovered / focused */
  --fp-border-green: rgba(43, 180, 93, 0.5);

  /* TEXT */
  --fp-fg-1:         #0F172A;   /* primary text */
  --fp-fg-2:         #475569;   /* secondary */
  --fp-fg-3:         #64748B;   /* tertiary, captions */
  --fp-fg-4:         #94A3B8;   /* muted, disabled */

  /* BRAND — green stays, but soften the soft/glow alphas on white */
  --fp-green-soft:   rgba(43, 180, 93, 0.10);
  --fp-green-glow:   rgba(43, 180, 93, 0.25);

  /* SEMANTIC — reduce alpha by ~25% so chip backgrounds don't yell on white */
  --fp-success-bg:   rgba(43, 180, 93, 0.10);
  --fp-warn-bg:      rgba(245, 165, 36, 0.11);
  --fp-danger-bg:    rgba(240, 80, 108, 0.11);
  --fp-info-bg:      rgba(111, 168, 255, 0.11);

  /* ELEVATION — deeper shadow alphas read as smudges on white; pull down */
  --fp-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --fp-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
  --fp-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10);
  --fp-shadow-xl:  0 24px 60px rgba(15, 23, 42, 0.14);
  --fp-shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.10), 0 0 0 1px var(--fp-border);
}