/* ============================================================
   cmvng — Design Tokens & Core Components
   Light theme · Switzer + JetBrains Mono · cmvng blue signature
   ============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap");

:root {
  /* ---- Neutrals (cool ink scale) ---- */
  --canvas:      #F6F7F9;
  --canvas-2:    #FAFBFC;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6F8;
  --surface-3:   #EEF1F4;

  --ink-900: #0A0C10;
  --ink-800: #14181F;
  --ink-700: #272D38;
  --ink-600: #404856;
  --ink-500: #5A6473;
  --ink-400: #828B9A;
  --ink-300: #AEB6C2;
  --ink-200: #D3D9E1;
  --line:      #E5E8EE;
  --line-soft: #EEF1F5;
  --line-strong:#D8DDE5;

  /* ---- Brand (cmvng blue) ---- */
  --accent:        #2C6BE3;  /* cmvng blue — brand + primary action */
  --accent-bright: #5C93FF;
  --accent-deep:   #1B50C0;
  --accent-wash:   #EAF1FE;
  --accent-wash-2: #D7E5FD;
  --brand-2:       #2456C8;  /* deeper bar tone in the mark */

  /* ---- Semantic P&L (green up / red down) ---- */
  --up:        #0EA66E;
  --up-bright: #16D08A;
  --up-deep:   #0A7E54;
  --up-wash:   #E7F7F0;
  --down:        #E5484D;
  --down-bright: #FF5A66;
  --down-deep:   #C53237;
  --down-wash:   #FDECEC;

  --warn:      #E0962B;
  --warn-wash: #FBF1DF;

  /* ---- Data viz (categorical, non-semantic) ---- */
  --viz-blue:   #4F7CFF;
  --viz-violet: #8B7BFF;
  --viz-amber:  #F2A93B;
  --viz-teal:   #18B5C9;
  --viz-pink:   #E879A6;

  /* ---- Typography ---- */
  --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Radii ---- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---- Elevation (soft, premium) ---- */
  --sh-xs: 0 1px 2px rgba(10,12,16,.05);
  --sh-sm: 0 1px 2px rgba(10,12,16,.05), 0 2px 5px rgba(10,12,16,.04);
  --sh-md: 0 2px 4px rgba(10,12,16,.04), 0 10px 24px rgba(10,12,16,.07);
  --sh-lg: 0 8px 24px rgba(10,12,16,.08), 0 28px 56px rgba(10,12,16,.10);
  --sh-pop: 0 16px 40px rgba(10,12,16,.14);
  --ring: 0 0 0 1px var(--line);
  --ring-accent: 0 0 0 3px rgba(44,107,227,.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .22s;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent-wash-2); color: var(--accent-deep); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   Type utilities
   ============================================================ */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-400);
}
.t-display { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.t-h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.t-h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.t-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.t-body { font-size: 16px; color: var(--ink-500); line-height: 1.6; }
.t-sm { font-size: 13px; color: var(--ink-500); }
.muted { color: var(--ink-500); }
.muted-2 { color: var(--ink-400); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; transition: transform var(--dur) var(--ease),
    background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur);
  user-select: none;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink-900); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--sh-md); transform: translateY(-1px); }

.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(10,12,16,.06), 0 6px 16px rgba(44,107,227,.30); }
.btn-accent:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(44,107,227,.36); }

.btn-ghost { background: var(--surface); color: var(--ink-900); box-shadow: var(--ring); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong); }

.btn-soft { background: var(--surface-2); color: var(--ink-700); }
.btn-soft:hover { background: var(--surface-3); }

.btn-sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }

/* ============================================================
   Badges / chips / pills
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: var(--r-full); white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--surface-2); color: var(--ink-600);
}
.badge-up   { background: var(--up-wash);   color: var(--up-deep); }
.badge-down { background: var(--down-wash); color: var(--down-deep); }
.badge-warn { background: var(--warn-wash); color: #9A6516; }
.badge-ink  { background: var(--ink-900);   color: #fff; }
.badge-brand { background: var(--accent-wash); color: var(--accent-deep); }
.badge-outline { background: transparent; box-shadow: var(--ring); color: var(--ink-600); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.dot-live { box-shadow: 0 0 0 0 rgba(14,166,110,.5); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14,166,110,.45); }
  70% { box-shadow: 0 0 0 6px rgba(14,166,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,166,110,0); }
}

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--ring), var(--sh-sm);
}
.card-pad { padding: 22px; }
.hairline { height: 1px; background: var(--line); border: 0; }
.divider-v { width: 1px; background: var(--line); align-self: stretch; }

/* glass for overlays on imagery */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), var(--sh-md);
}

/* ============================================================
   Inputs
   ============================================================ */
.input {
  height: 42px; width: 100%; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-900); font-size: 14.5px;
  box-shadow: var(--ring); transition: box-shadow var(--dur);
  font-family: inherit;
}
.input::placeholder { color: var(--ink-400); }
.input:focus { outline: none; box-shadow: 0 0 0 1px var(--accent), var(--ring-accent); }

/* ============================================================
   Layout helpers
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   Brand mark — leaning two-tone blue bars + rounded wordmark
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 11px;
  font-family: "Poppins", var(--font-sans); font-weight: 700;
  letter-spacing: -0.03em; font-size: 21px; color: var(--ink-900); line-height: 1; }
.logo-mark {
  width: 30px; height: 26px; flex: none; position: relative;
  background: none; box-shadow: none; border-radius: 0;
}
.logo-mark::after { content: none; }
.logo-mono { font-feature-settings: "tnum"; }

/* the leaning ascending bars */
.logo-bars { position: absolute; inset: 0; display: flex; align-items: flex-end;
  justify-content: center; gap: 7%; padding: 0; transform: skewX(-13deg); }
.logo-bars i { width: 23%; border-radius: 2.5px; background: var(--accent); }
.logo-bars i:nth-child(1){ height: 64%; background: var(--accent-bright); }
.logo-bars i:nth-child(2){ height: 84%; background: var(--brand-2); }
.logo-bars i:nth-child(3){ height: 100%; background: var(--accent); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }