/* ==========================================================================
   MAVIO — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the MAVIO design system. Import into any page:
       <link rel="stylesheet" href="tokens.css">
   --------------------------------------------------------------------------
   Brand: MAVIO — Management · Visibility · Overview
   Structure modelled on a disciplined token system: raw palette → semantic
   roles → modular scales → brand-tinted elevation → motion.
   Edit a value ONCE here; every page that consumes the token updates.
   ========================================================================== */

/* ---------- Font ----------
   Manrope is the single MAVIO typeface — geometric humanist sans for display,
   UI, body and data. Loaded from Google Fonts. To run fully offline, replace
   this @import with a self-hosted @font-face pointing at fonts/Manrope.woff2.
   ----------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ============================================================
     COLOR — PRIMARY PALETTE
     Green family — the MAVIO anchor: "trust + precision".
     #0F3B36 is the brand green; the scale runs darker (footers,
     contained icons) and lighter (tints, borders, washes).
     ============================================================ */
  --mv-green-950: #0a2820;   /* Deepest — footer */
  --mv-green-900: #0d3029;
  --mv-green-800: #0F3B36;   /* ★ Primary brand green */
  --mv-green-700: #1a4a40;
  --mv-green-600: #2d5d52;
  --mv-green-500: #4f7d72;
  --mv-green-400: #7da89d;
  --mv-green-300: #b3ccc5;
  --mv-green-200: #d4e3df;   /* Border on green tint */
  --mv-green-100: #eef4f2;   /* Faint green wash */
  --mv-green-50:  #f3f7f5;

  /* Gold / Amber family — the single accent: "signal + premium". */
  --mv-gold-700: #9a6800;    /* Deep — text on light */
  --mv-gold-600: #b07010;
  --mv-gold-500: #c07a00;
  --mv-gold-400: #F5A623;    /* ★ Accent gold */
  --mv-gold-300: #f8c069;
  --mv-gold-200: #fbe0b0;
  --mv-gold-100: #fdf0d8;
  --mv-gold-soft: #fff8ec;   /* Tinted accent bg */

  /* Cool gray — neutral data / down-delta accent */
  --mv-cool: #B7BCC2;

  /* ============================================================
     COLOR — NEUTRALS  (warm, low-chroma — pairs with green)
     ============================================================ */
  --mv-ink:       #1a1a1a;   /* Strong body text */
  --mv-warm-700:  #5a5248;
  --mv-warm-600:  #7a7268;   /* Secondary text */
  --mv-warm-500:  #9a9087;
  --mv-warm-400:  #b0a89e;   /* Meta / tertiary */
  --mv-warm-300:  #d8d2c8;
  --mv-warm-200:  #e8e2d8;   /* Hairline border */
  --mv-warm-100:  #ede8e0;   /* Divider */
  --mv-bg:        #f5f4f1;   /* Base warm background */
  --mv-bg-warm:   #fdf8f3;   /* Warmer section bg */
  --mv-bg-cool:   #f0efec;   /* Cooler section bg */
  --mv-white:     #ffffff;

  /* ============================================================
     COLOR — SEMANTIC ROLES  (use THESE in UI, not the raw palette)
     ============================================================ */
  --color-bg:           var(--mv-bg);
  --color-bg-warm:      var(--mv-bg-warm);
  --color-bg-alt:       var(--mv-bg-cool);
  --color-bg-surface:   var(--mv-white);
  --color-bg-inverse:   var(--mv-green-800);
  --color-bg-tinted:    var(--mv-green-100);

  --color-fg:           var(--mv-green-800);   /* Headings / primary on light */
  --color-fg-body:      var(--mv-warm-600);    /* Body copy */
  --color-fg-2:         var(--mv-warm-700);
  --color-fg-3:         var(--mv-warm-500);
  --color-fg-muted:     var(--mv-warm-400);
  --color-fg-on-dark:   var(--mv-white);
  --color-fg-on-accent: var(--mv-green-800);   /* gold buttons use dark text */

  --color-accent:       var(--mv-gold-400);    /* primary CTA / signal */
  --color-accent-text:  var(--mv-gold-600);    /* gold legible on light */
  --color-accent-hover: #e89a18;
  --color-accent-soft:  var(--mv-gold-soft);

  --color-primary:      var(--mv-green-800);
  --color-primary-hover:#0c322e;

  --color-border:       var(--mv-warm-200);
  --color-border-green: var(--mv-green-200);
  --color-divider:      var(--mv-warm-100);

  --color-success:      #018040;
  --color-warning:      var(--mv-gold-500);
  --color-danger:       #c1392b;

  /* ============================================================
     DATA VISUALIZATION — chart series + delta semantics
     Categorical series (max 6) → derived from green + gold.
     Series 1 (gold) is reserved for the highlight series.
     ============================================================ */
  --series-1: var(--mv-gold-400);    /* #F5A623 — highlight */
  --series-2: #2d8c7a;               /* teal */
  --series-3: var(--mv-green-800);   /* #0F3B36 — deep */
  --series-4: #8aa7ae;               /* slate */
  --series-5: #fcd68a;               /* sand */
  --series-6: #5a9e8f;               /* sage */

  /* Delta / value semantics — colour by MEANING (polarity), not direction.
     higher-better: ▲ positive / ▼ negative
     lower-better : ▲ negative / ▼ positive   (e.g. cancel-rate, cost, returns)
     neutral      : data-neutral both ways */
  --data-positive:  var(--color-success); /* good change */
  --data-negative:  var(--color-danger);  /* bad change */
  --data-attention: var(--mv-gold-400);   /* highlight / target line */
  --data-neutral:   var(--mv-cool);       /* baseline / prior period */
  --data-grid:      var(--mv-warm-100);   /* gridlines / axes / reference */

  /* ============================================================
     TYPE — STACKS  (Manrope only — single typeface)
     ============================================================ */
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — base 15px, tuned to the MAVIO landing rhythm */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   46px;
  --text-5xl:   58px;
  --text-6xl:   66px;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-display: -0.045em;  /* big hero */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.16em;    /* all-caps eyebrow */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   56px;
  --space-10:  72px;
  --space-11:  88px;
  --space-12: 112px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — green-tinted shadows (rgba of brand green #0F3B36)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15, 59, 54, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 59, 54, 0.08), 0 1px 2px rgba(15, 59, 54, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(15, 59, 54, 0.12), 0 2px 4px rgba(15, 59, 54, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(15, 59, 54, 0.18), 0 4px 8px rgba(15, 59, 54, 0.06);
  --shadow-xl: 0 32px 64px -16px rgba(15, 59, 54, 0.24);
  --shadow-glow-gold: 0 8px 28px -6px rgba(245, 166, 35, 0.42);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY  (mv- prefixed — opt-in helper classes)
   ========================================================================== */
.mv-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-fg-on-dark);
  text-wrap: balance;
}
.mv-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  text-wrap: balance;
}
.mv-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  text-wrap: balance;
}
.mv-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-fg);
}
.mv-lead {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-body);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}
.mv-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-body);
  text-wrap: pretty;
}
.mv-small {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-3);
}
.mv-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ==========================================================================
   PRIMITIVES  (optional building blocks)
   ========================================================================== */
.mv-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-extra);
  font-size: var(--text-sm); letter-spacing: 0.04em;
  padding: 14px 28px; border-radius: var(--radius-md);
  border: none; cursor: pointer; text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.mv-btn--accent { background: var(--color-accent); color: var(--color-fg-on-accent); }
.mv-btn--accent:hover { background: var(--color-accent-hover); }
.mv-btn--primary { background: var(--color-primary); color: var(--color-fg-on-dark); }
.mv-btn--primary:hover { background: var(--color-primary-hover); }
.mv-btn--ghost {
  background: rgba(15, 59, 54, 0.07); color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.mv-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.mv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  padding: 4px 11px; border-radius: var(--radius-pill);
}