/* ==========================================================================
   Travel CRM Platform design system — MOVA Solutions
   --------------------------------------------------------------------------
   Neutral, premium enterprise surface. The CRM itself carries no heavy brand:
   graphite and stone neutrals, one restrained accent, semantic colour only
   where it means something — because every client company will eventually
   bring its own branding on top. The public landing page layers the MOVA
   orange + black identity over these same primitives.

   Everything here is authored and self-hosted. A strict Content-Security-Policy
   blocks CDNs, remote fonts and remote images, so nothing may reach outward.
   ========================================================================== */

/* --- Typefaces ---------------------------------------------------------- */
/* Three voices, all SIL OFL and self-hosted:
   Inter          — the interface: labels, body, forms, everything readable.
   Space Grotesk  — the display voice: page titles, metrics, the numerals.
   Archivo        — condensed tabular data, using its width axis. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Graphite. The CRM's structural colour — deliberately unbranded, because
     each client company eventually brings its own identity on top. The token
     names keep their historical --green-* spelling so every consumer keeps
     working; the values are neutral. */
  --green-950: #0B0D10;
  --green-900: #14171C;
  --green-850: #1B1F26;
  --green-800: #232833;
  --green-700: #2E3440;
  --green-600: #3D4452;
  --green-500: #4E5666;
  --green-400: #6E7686;
  --green-300: #9AA1AF;
  --green-100: #E2E5EA;
  --green-050: #F1F3F6;

  /* MOVA orange — the platform's single brand voice. Used for emphasis and
     direction, never as a field colour inside the CRM. */
  --amber-700: #9A3E06;
  --amber-600: #C2540A;
  --amber-500: #F26B1D;
  --amber-300: #F9A26B;
  --amber-100: #FDE7D8;

  /* Stone neutrals for grounds and hairlines. */
  --stone-000: #FFFFFF;
  --stone-050: #F6F7F9;
  --stone-100: #ECEEF1;
  --stone-200: #DEE1E6;
  --stone-300: #C4C9D1;
  --stone-400: #99A0AC;
  --stone-500: #6E7581;
  --stone-600: #4E545E;
  --stone-700: #343943;
  --stone-800: #1F232B;
  --ink: #0E1116;

  /* Semantic signals — the only saturated colour inside the CRM. */
  --signal-red: #C0362C;
  --signal-red-100: #FBE5E3;
  --signal-blue: #2563EB;
  --signal-blue-100: #E3ECFD;
  --signal-green: #178A50;
  --signal-green-600: #127443;
  --signal-green-100: #DDF2E7;

  /* Semantic surface roles (light — the workspace default). */
  --ground: var(--stone-050);
  --plate: var(--stone-000);
  --plate-sunken: var(--stone-050);
  --keyline: var(--stone-200);
  --keyline-strong: var(--stone-300);
  --text: var(--ink);
  --text-muted: var(--stone-500);
  --text-faint: var(--stone-400);
  --accent: var(--green-800);
  --accent-text: var(--green-800);
  --on-accent: #FFFFFF;

  /* Signage plates are near-rectangular. Small radii on purpose. */
  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-plate: 14px;

  /* 4px base. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;
  --s11: 96px; --s12: 128px;

  /* Depth: real offset plus soft blur. Never a zero-offset halo. */
  --lift-1: 0 1px 2px rgba(6, 41, 28, .07), 0 2px 6px rgba(6, 41, 28, .05);
  --lift-2: 0 2px 4px rgba(6, 41, 28, .08), 0 8px 20px rgba(6, 41, 28, .07);
  --lift-3: 0 6px 12px rgba(6, 41, 28, .10), 0 22px 48px rgba(6, 41, 28, .12);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-quick: cubic-bezier(.3, .8, .4, 1);

  --measure: 68ch;
}

/* Dark instrument panel for the long evenings before a departure. */
:root[data-theme='dark'] {
  --ground: #0C0E12;
  --plate: #14171D;
  --plate-sunken: #101318;
  --keyline: #232833;
  --keyline-strong: #323947;
  --text: #E9EBEF;
  --text-muted: #A2A9B6;
  --text-faint: #737B89;
  --accent: var(--green-300);
  --accent-text: var(--green-300);
  --on-accent: #0B0D10;
  --lift-1: 0 1px 2px rgba(0, 0, 0, .4);
  --lift-2: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .35);
  --lift-3: 0 8px 18px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* --- The signage voice --------------------------------------------------- */
/* Plate lettering: expanded, tight, upper case — how a gate sign is set. */
.sign {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sign-label {
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Data columns condense, the way a timetable does — Archivo's width axis. */
.data {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.numeral {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Positive, and not by taste: Space Grotesk's tabular 1 is drawn with a slab
     foot wide enough to touch its neighbour, so "$119K" and "11:11" ran into
     themselves at any tracking below about .05em. Loose figures also happen to
     be what a departure board looks like, which is the metaphor already. */
  letter-spacing: 0.06em;
  line-height: .86;
}
/* The build is a demonstration and says so wherever the name appears. */
.mark__demo {
  padding: 3px 7px 2px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  font-weight: 650;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  opacity: .78;
}

/* --- Plate: the one container primitive --------------------------------- */
/* A real sign carries a keyline held inset from its edge. That inset line is
   the system's signature and the reason nothing here needs a card shadow. */
.plate {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--keyline);
  border-radius: var(--r-plate);
  /* A whisper of depth — the keyline stays the signature, the shadow just
     lifts the plate off the ground the way printed signage sits proud. */
  box-shadow: 0 1px 2px rgba(11, 13, 16, .04), 0 4px 16px rgba(11, 13, 16, .04);
}
:root[data-theme='dark'] .plate {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .2);
}
.plate--keyline::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--keyline);
  border-radius: calc(var(--r-plate) - 5px);
  pointer-events: none;
}
.plate--filled {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}
.plate--filled.plate--keyline::after { border-color: rgba(255, 255, 255, .22); }
.plate--amber {
  background: var(--amber-500);
  border-color: var(--amber-600);
  color: var(--green-950);
}
.plate--amber.plate--keyline::after { border-color: rgba(4, 29, 20, .25); }

/* --- Controls: every control is a plate --------------------------------- */
.btn {
  --btn-bg: var(--plate);
  --btn-fg: var(--text);
  --btn-line: var(--keyline-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 10px 16px;
  min-height: 40px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--ease-quick),
              border-color .18s var(--ease-quick),
              transform .18s var(--ease-quick),
              box-shadow .18s var(--ease-quick);
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--lift-1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--primary {
  --btn-bg: var(--green-700);
  --btn-fg: #fff;
  --btn-line: var(--green-800);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-bg) 88%, #fff), var(--btn-bg));
  box-shadow: 0 1px 2px rgba(11, 13, 16, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:hover {
  --btn-bg: var(--green-600);
  border-color: var(--green-600);
  box-shadow: 0 4px 12px rgba(11, 13, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--onDark {
  --btn-bg: #fff;
  --btn-fg: var(--green-900);
  --btn-line: #fff;
}
.btn--onDark:hover { --btn-bg: var(--amber-500); --btn-line: var(--amber-500); --btn-fg: #fff; }
.btn--ghostDark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-line: rgba(255, 255, 255, .35);
}
.btn--ghostDark:hover { --btn-line: #fff; background: rgba(255, 255, 255, .08); }
.btn--danger { --btn-fg: var(--signal-red); --btn-line: #E4B7B3; }
.btn--danger:hover { --btn-bg: var(--signal-red); --btn-fg: #fff; --btn-line: var(--signal-red); }
.btn--sm { min-height: 32px; padding: 6px 11px; font-size: .719rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn[data-busy='true'] { pointer-events: none; opacity: .7; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Fields -------------------------------------------------------------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > span {
  font-weight: 600;
  font-size: .688rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  background: var(--plate);
  border: 1px solid var(--keyline-strong);
  border-radius: var(--r-md);
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field--check {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s2);
}
.field--check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--green-700); }
.field--wide { grid-column: 1 / -1; }
.field-hint { font-size: .75rem; color: var(--text-muted); }

/* --- Enamel badges ------------------------------------------------------- */
/* Status is read at a glance from across a room on a real sign; these are
   filled, not tinted outlines. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--stone-200);
  color: var(--stone-700);
  font-weight: 650;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--lead      { background: var(--stone-300); color: var(--stone-800); }
.badge--prospect  { background: var(--signal-blue); color: #fff; }
.badge--confirmed { background: var(--signal-green); color: #fff; }
.badge--completed { background: var(--green-800); color: #fff; }
.badge--lost      { background: var(--stone-500); color: #fff; }
.badge--hot       { background: var(--signal-red); color: #fff; }
.badge--warm      { background: var(--amber-500); color: var(--green-950); }
.badge--cool      { background: var(--signal-blue-100); color: var(--signal-blue); }
.badge--cold      { background: var(--stone-200); color: var(--stone-600); }
.badge--alert     { background: var(--signal-red); color: #fff; }
.badge--caution   { background: var(--amber-500); color: var(--green-950); }
.badge--ok        { background: var(--signal-green); color: #fff; }
.badge--quiet     { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--keyline-strong); }

/* --- Directional icons --------------------------------------------------- */
/* One stroke weight across the whole system. Drawn, never a Unicode glyph. */
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.ico--sm { width: 16px; height: 16px; stroke-width: 2; }
.ico--lg { width: 26px; height: 26px; stroke-width: 1.6; }

/* --- Split-flap: the system's one authored motion ------------------------ */
/* The mechanical departure board this audience has stood in front of a hundred
   times. Used once per surface, on the numeral that matters. */
.flap { display: inline-flex; gap: 2px; }
.flap span {
  display: inline-block;
  min-width: .62em;
  text-align: center;
  animation: flap-settle .5s var(--ease) both;
}
@keyframes flap-settle {
  from { transform: translateY(-.16em) scaleY(.68); opacity: 0; filter: blur(3px); }
  60%  { transform: translateY(.03em) scaleY(1.04); opacity: 1; filter: blur(0); }
  to   { transform: none; opacity: 1; }
}

/* --- Utilities ----------------------------------------------------------- */
.stack { display: grid; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pos { color: var(--signal-green); }
.neg { color: var(--signal-red); }
:root[data-theme='dark'] .pos { color: #4FC98B; }