/* =============================================================================
 * 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 {
  /* Tell browsers to render native chrome (selects, checkboxes, radios,
     scrollbars, date pickers) in dark by default. body.light-mode flips
     this to `light`. Without this declaration native controls follow the
     OS appearance regardless of our theme, so a Mac in dark mode shows
     black <select> popovers even when our app is in light mode. */
  color-scheme: dark;
  /* Pin checkbox / radio tick chrome to brand green in both modes. */
  accent-color: #2BB45D;

  /* ---------- 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;

  /* ---------- PIPELINE STAGE ACCENTS (same hues both modes) ---------- */
  --fp-stage-offer:    #6FA8FF;   /* offer made */
  --fp-stage-pending:  #F5A524;   /* pending contract */
  --fp-stage-uc:       #A78BFA;   /* under contract */
  --fp-stage-mkt:      #2BB45D;   /* marketing */
  --fp-stage-assigned: #38D272;   /* assigned */
  --fp-stage-stalled:  #F0506C;   /* stalled */

  /* ---------- CALL-OUTCOME DOTS (neutrals re-tuned per mode) ---------- */
  --fp-call-untouched: #374151;   /* dark neutral on dark surface */
  --fp-call-attempted: #6B7280;
  --fp-call-vm:        #EAB308;   /* voicemail — amber */
  --fp-call-sms:       #F97316;   /* sent sms — orange */
  --fp-call-vmsms:     #22C55E;   /* vm + sms — green */
  --fp-call-noint:     #3B82F6;   /* not interested — blue */
  --fp-call-int:       #A78BFA;   /* interested — violet */
  --fp-call-wrong:     #EF4444;   /* wrong number — red */
  --fp-call-dnc:       #EC4899;   /* do not contact — pink */

  /* ---------- 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;

  /* ---------- APP CHROME ---------- */
  --fp-sidebar-w:           240px;
  --fp-sidebar-w-collapsed: 64px;
  --fp-topbar-h:            52px;
  --fp-row-h-dense:         32px;     /* tables */
  --fp-row-h:               40px;     /* default rows */
  --fp-row-h-comfortable:   48px;
}

/* =============================================================================
 * 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 — Design System v2 (2026-05-29)
 *
 * Sibling of dark mode — same elevation logic, warm-paper / bone neutrals
 * (not cool slate). Moves off pure white so the green accent doesn't
 * shout. Same 5-tier elevation as dark mode; hue stays consistent across
 * tiers (off-white bone, kraft envelope, not Tailwind gray).
 *
 * Ported verbatim from claude.ai/design handoff
 * "Flyplab Design System v2" (project/colors_and_type.css), which
 * supersedes the earlier Tailwind-slate placeholder.
 *
 * Toggle: add class `light-mode` to <body>. Sidebar lever in the brand
 * header is the canonical control; Settings → Appearance is the mirror.
 * ============================================================================= */
body.light-mode {
  /* Flip native chrome (selects, checkboxes, radios, scrollbars, date
     pickers) into light rendering so a Mac OS in dark mode doesn't keep
     showing black <select> popovers and inverted checkmarks. */
  color-scheme: light;
}

/* <select> popovers — the OS draws the dropdown list using the option
   element's own background/color, NOT the parent select's. Chrome/Safari
   honor these properties on <option>, so paint them warm-paper bone in
   light mode and the canonical bg-1 panel in dark mode for consistency
   with closed selects. Defined outside the body.light-mode block so the
   dark-mode default also resolves to a proper var() instead of inheriting
   browser white. */
select option {
  background-color: var(--fp-bg-1);
  color: var(--fp-fg-1);
}
body.light-mode {

  /* SURFACES — warm-paper neutrals (kraft → bone → card → raised → pressed) */
  --fp-bg-0:         #EEEAE2;   /* canvas — kraft / envelope */
  --fp-bg-1:         #F8F4ED;   /* panel  — bone */
  --fp-bg-2:         #F2EEE5;   /* card */
  --fp-bg-3:         #E3DED1;   /* raised / hover */
  --fp-bg-4:         #D2CCBB;   /* pressed / active row */
  --fp-bg-modal:     #FBF8F1;   /* modal sheets */

  /* BORDERS — warm taupe so hairlines stay visible without being heavy */
  --fp-border:       #D8D2C2;
  --fp-border-soft:  #E6E1D2;
  --fp-border-loud:  #A39B85;
  --fp-border-green: rgba(43, 180, 93, 0.5);

  /* TEXT — warm near-blacks, no cool slate */
  --fp-fg-1:         #1B1B14;   /* primary — warm near-black */
  --fp-fg-2:         #4A4839;   /* secondary */
  --fp-fg-3:         #6E6A57;   /* tertiary, captions */
  --fp-fg-4:         #9B967F;   /* muted, disabled */

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

  /* CALL-OUTCOME neutrals re-tuned — "empty" call states become warm grays
   * so they read as quiet (not near-black) on paper. Bright outcome accents
   * keep their hue but nudge the lightest greens down for paper contrast. */
  --fp-call-untouched: #C4BCA8;
  --fp-call-attempted: #9B967F;
  --fp-call-vm:        #C98A06;
  --fp-call-vmsms:     #1F9E4C;
  --fp-stage-mkt:      #1F9E4C;
  --fp-stage-assigned: #2BB45D;

  /* SEMANTIC — reduce alpha so chip backgrounds don't yell on paper */
  --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 — warm-shadow alphas, much lighter than dark mode */
  --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);
}