/* ==========================================================================
   Moveo brand — tokens + core components
   Single source of truth for anything an agent builds in HTML/CSS.
   Derived from moveo.group, moveosoftware.com and Moveo's own HTML decks.
   For a standalone deliverable, inline this file into the page's <style>.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rubik:wght@400;500;700;800&display=swap');

:root {
  /* ---- Core palette ---- */
  --moveo-navy:        #162F4C;  /* primary brand color: text on light, dark surfaces */
  --moveo-navy-2:      #112644;  /* dark-gradient mid stop */
  --moveo-navy-3:      #0D2038;  /* dark-gradient end stop, page behind slides */
  --moveo-coral:       #F67A68;  /* the accent. Fills, large numbers, rules, text on navy */
  --moveo-coral-deep:  #E05A47;  /* gradient partner, focus ring */
  --moveo-coral-text:  #C2402B;  /* coral for small text on light (AA) */
  --moveo-coral-soft:  #FEF0EE;  /* coral tint background (AA with coral-text) */
  --moveo-white:       #FFFFFF;
  --moveo-slate:       #F4F6FA;  /* light section / page background */
  --moveo-cream:       #F7F7F7;  /* logo on dark, Group CTA band */
  --moveo-muted:       #5D6E8E;  /* secondary text on light (AA) */
  --moveo-light-blue:  #9AB6CC;  /* quiet secondary accent, data viz */
  --moveo-blue:        #5BA0FF;  /* glow + data viz only */

  /* ---- Ink & lines (navy at opacity) ---- */
  --moveo-line:        rgba(22, 47, 76, .06);
  --moveo-line-strong: rgba(22, 47, 76, .14);
  --moveo-tint:        #EEF1F6;  /* neutral chip / button background on light */
  --moveo-on-dark-1:   #FFFFFF;
  --moveo-on-dark-2:   rgba(255, 255, 255, .72); /* body text on dark */
  --moveo-on-dark-3:   rgba(255, 255, 255, .50); /* captions on dark */
  --moveo-dark-card:   rgba(255, 255, 255, .05);
  --moveo-dark-line:   rgba(255, 255, 255, .10);

  /* ---- Status (functional, never decorative) ---- */
  --moveo-success:     #15803D;
  --moveo-success-bg:  rgba(34, 197, 94, .12);
  --moveo-success-bd:  rgba(34, 197, 94, .30);
  --moveo-warning:     #B45309;
  --moveo-warning-fill:#F59E0B;
  --moveo-warning-bg:  rgba(245, 158, 11, .13);
  --moveo-warning-bd:  rgba(245, 158, 11, .35);
  --moveo-danger:      #B91C1C;  /* functional addition, not in source material */
  --moveo-danger-bg:   rgba(220, 38, 38, .10);
  --moveo-danger-bd:   rgba(220, 38, 38, .30);

  /* ---- Type ---- */
  --moveo-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --moveo-font-he:   'Rubik', 'Inter', system-ui, Arial, sans-serif;
  --moveo-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Shape, depth, motion ---- */
  --moveo-radius-sm:   6px;
  --moveo-radius:      14px;
  --moveo-radius-lg:   24px;
  --moveo-radius-pill: 999px;
  --moveo-shadow:       0 1px 2px rgba(22,47,76,.04), 0 8px 24px -12px rgba(22,47,76,.12);
  --moveo-shadow-hover: 0 4px 8px rgba(22,47,76,.06), 0 20px 40px -16px rgba(22,47,76,.22);
  --moveo-ease:      cubic-bezier(.22, 1, .36, 1);
  --moveo-dur-fast:  .22s;
  --moveo-dur:       .32s;
  --moveo-dur-slow:  .55s;

  /* ---- Gradients ---- */
  --moveo-grad-dark:  linear-gradient(135deg, var(--moveo-navy) 0%, var(--moveo-navy-2) 55%, var(--moveo-navy-3) 100%);
  --moveo-grad-light: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 70%, var(--moveo-slate) 100%);
  --moveo-grad-coral: linear-gradient(90deg, var(--moveo-coral-deep), var(--moveo-coral));
}

/* ---- Base ---- */
body { font-family: var(--moveo-font); color: var(--moveo-navy); }
[dir="rtl"], :lang(he) { font-family: var(--moveo-font-he); }
:focus-visible { outline: 2px solid var(--moveo-coral-deep); outline-offset: 2px; }

/* ---- Surfaces ---- */
.m-light { background: var(--moveo-grad-light); color: var(--moveo-navy); }

/* Dark surface with the brand atmosphere: coral glow top-right, blue glow
   bottom-left, faint 44px grid fading out from the center. */
.m-dark { position: relative; isolation: isolate; background: var(--moveo-grad-dark); color: var(--moveo-on-dark-1); }
.m-dark::before,
.m-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m-dark::before {
  background:
    radial-gradient(circle at 72% 22%, rgba(246,122,104,.22), transparent 60%),
    radial-gradient(circle at 28% 82%, rgba(91,160,255,.16), transparent 60%);
}
.m-dark::after {
  opacity: .06;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
}
/* Soft coral orb — one per dark surface at most. Position it inline. */
.m-orb { position: absolute; z-index: -1; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(246,122,104,.20); filter: blur(100px); pointer-events: none; }

/* Coral dot-grid accent for light surfaces — bottom-right corner, fading up-left. */
.m-dot-grid {
  position: absolute; right: 3.5rem; bottom: 3.25rem; width: 200px; height: 120px; pointer-events: none;
  background-image: radial-gradient(rgba(246,122,104,.35) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(215deg, #000 30%, transparent 85%);
          mask-image: linear-gradient(215deg, #000 30%, transparent 85%);
}

/* ---- Typography ---- */
.m-label {   /* eyebrow above every headline */
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--moveo-coral-text);
}
.m-dark .m-label { color: var(--moveo-coral); }
.m-display { font-size: clamp(3rem, 6.5vw, 4.9rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.m-h1      { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.m-h2      { font-size: clamp(2rem, 3.4vw, 2.7rem);  font-weight: 800; letter-spacing: -.03em;  line-height: 1.08; }
.m-h3      { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.m-sub     { font-size: 1.05rem; line-height: 1.55; color: var(--moveo-muted); max-width: 46rem; }
.m-dark .m-sub { color: var(--moveo-on-dark-2); }
.m-body    { font-size: 1rem; line-height: 1.6; }
.m-caption { font-size: .8rem; font-weight: 500; color: var(--moveo-muted); }
.m-dark .m-caption { color: var(--moveo-on-dark-3); }
.m-accent  { color: var(--moveo-coral); }   /* one accent word in a dark headline */
.m-stat    { font-size: clamp(2.5rem, 4.5vw, 3.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--moveo-coral); }
.m-stat--hero { font-size: clamp(5rem, 11vw, 8.5rem); letter-spacing: -.05em; line-height: .95; }
.m-light .m-stat, .m-card .m-stat { color: var(--moveo-coral-deep); }
.m-mono    { font-family: var(--moveo-font-mono); font-size: .75rem; letter-spacing: .02em; }

/* ---- Brand atoms ---- */
.m-rule    { width: 52px; height: 4px; border-radius: 2px; background: var(--moveo-coral); }
.m-diamond { display: inline-block; flex: none; width: .65rem; height: .65rem; border-radius: 2px; background: var(--moveo-coral); transform: rotate(45deg); }

/* ---- Cards ---- */
.m-card {
  position: relative; background: var(--moveo-white); border: 1px solid var(--moveo-line);
  border-radius: var(--moveo-radius); box-shadow: var(--moveo-shadow);
  transition: transform var(--moveo-dur) var(--moveo-ease), box-shadow var(--moveo-dur) var(--moveo-ease);
}
.m-card:is(a, button, [tabindex]):hover { transform: translateY(-4px); box-shadow: var(--moveo-shadow-hover); }
.m-card--accent::before {   /* 4px coral top edge — stat cards */
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--moveo-coral); border-radius: var(--moveo-radius) var(--moveo-radius) 0 0;
}
.m-card--navy { background: var(--moveo-grad-dark); border-color: transparent; color: var(--moveo-on-dark-1); }
.m-card--dark { background: var(--moveo-dark-card); border: 1px solid var(--moveo-dark-line); border-radius: var(--moveo-radius); }

/* ---- Chips, tags, number badges ---- */
.m-chip {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .38rem .75rem; border-radius: var(--moveo-radius-pill);
  color: var(--moveo-navy); background: var(--moveo-tint); border: 1px solid var(--moveo-line-strong);
}
.m-chip--done     { color: var(--moveo-success); background: var(--moveo-success-bg); border-color: var(--moveo-success-bd); }
.m-chip--progress { color: var(--moveo-warning); background: var(--moveo-warning-bg); border-color: var(--moveo-warning-bd); }
.m-chip--risk     { color: var(--moveo-danger);  background: var(--moveo-danger-bg);  border-color: var(--moveo-danger-bd); }

.m-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 5px; color: var(--moveo-muted); background: var(--moveo-tint);
}
.m-tag--coral { color: var(--moveo-coral-text); background: var(--moveo-coral-soft); }

.m-num {
  flex: none; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .6rem;
  font-weight: 800; font-size: .95rem; background: #E9EDF3; color: var(--moveo-navy);
}
.m-num--coral { background: var(--moveo-coral); color: var(--moveo-navy); }
.m-num--navy  { background: var(--moveo-navy);  color: var(--moveo-white); }

/* ---- Buttons ---- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem;
  padding: 0 1.75rem; border-radius: var(--moveo-radius-pill); border: 1px solid transparent;
  font: 700 1rem/1 var(--moveo-font); text-decoration: none; cursor: pointer;
  background: var(--moveo-coral); color: var(--moveo-navy);
  box-shadow: 0 10px 24px -8px rgba(246,122,104,.45);
  transition: transform var(--moveo-dur-fast) var(--moveo-ease), box-shadow var(--moveo-dur-fast) ease, background-color var(--moveo-dur-fast) ease, color var(--moveo-dur-fast) ease;
}
.m-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(246,122,104,.6); }
.m-btn--ghost { background: transparent; color: var(--moveo-navy); border-color: var(--moveo-line-strong); box-shadow: none; }
.m-btn--ghost:hover { background: var(--moveo-navy); color: var(--moveo-white); }
.m-dark .m-btn--ghost { color: var(--moveo-white); border-color: rgba(255,255,255,.3); }
.m-dark .m-btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ---- Progress ---- */
.m-progress { height: 6px; border-radius: var(--moveo-radius-pill); background: rgba(22,47,76,.10); overflow: hidden; }
.m-dark .m-progress { background: rgba(255,255,255,.10); }
.m-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--moveo-grad-coral); }
.m-progress--warning > span { background: var(--moveo-warning-fill); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}