/* ============================================================
   Relevo Lab — brand tokens (Kubo-derived, 2026-07-01 rebrand)
   Single source of truth for color, type, border and motion
   tokens shared by every page. Layout tokens (--pad, --maxw,
   --shell-maxw) stay local to each page's own stylesheet — they
   intentionally differ between the dashboard-shell pages and the
   simple section pages, so they are not centralized here.
   ============================================================ */
:root {
  --bg: #0A0B0F;
  --card: linear-gradient(180deg, #15171F, #101219);
  --card-hover: #1C1F28;
  --fg: #F4F5F7;
  --fg-muted: #C9CCD4;
  --fg-dim: #9AA0AD;
  --fg-faint: #61677A;
  --accent: #3D7BFF;
  --accent-deep: #2A6FFF;
  --accent-glow: rgba(61, 123, 255, 0.18);
  --gradient-ocean: linear-gradient(150deg, #2A6FFF, #27C6E8);
  --shadow-primary: 0 4px 14px rgba(42, 111, 255, 0.35);
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);
  --ok: #34D399;
  --ok-fg: #4ADEA3;
  --ok-tint: rgba(52, 211, 153, 0.12);
  --warn: #FBBF24;
  --warn-fg: #F3C150;
  --warn-tint: rgba(251, 191, 36, 0.14);
  --depart: #27C6E8;
  --depart-fg: #5DD8EE;
  --depart-tint: rgba(39, 198, 232, 0.14);
  --clean: #A78BFA;
  --clean-fg: #B69CFB;
  --clean-tint: rgba(167, 139, 250, 0.14);
  --bad: #FB7185;
  --bad-fg: #FB7185;
  --bad-tint: rgba(251, 113, 133, 0.12);
  --info: #3D7BFF;
  --gradient-reef: linear-gradient(150deg, #064E3B, #10B981);
  --gradient-dusk: linear-gradient(150deg, #3B0764, #7C3AED);
  --gradient-sunset: linear-gradient(150deg, #7F1D1D, #F43F5E 70%, #FB923C);
  --sans: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Per-card color accents — 2026-07-01
   .hue-* = discrete status hue (semantic). .grad-* = one of
   Kubo's 4 marketing gradients, for sequential/timeline steps.
   Both set --card-hue; .grad-* also sets --card-wash for the
   .pipeline-cards background-wash treatment.
   ============================================================ */
.hue-ok     { --card-hue: var(--ok); }
.hue-info   { --card-hue: var(--info); }
.hue-warn   { --card-hue: var(--warn); }
.hue-depart { --card-hue: var(--depart); }
.hue-clean  { --card-hue: var(--clean); }
.hue-bad    { --card-hue: var(--bad); }

.grad-ocean  { --card-hue: var(--accent-deep); --card-wash: var(--gradient-ocean); }
.grad-reef   { --card-hue: #10B981;            --card-wash: var(--gradient-reef); }
.grad-dusk   { --card-hue: #7C3AED;            --card-wash: var(--gradient-dusk); }
.grad-sunset { --card-hue: #F43F5E;            --card-wash: var(--gradient-sunset); }

.pipeline-cards .card {
  position: relative;
  overflow: hidden;
}
.pipeline-cards .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-wash, none);
  opacity: .14;
  pointer-events: none;
}

.process-step.grad-ocean .duration, .process-step.grad-reef .duration,
.process-step.grad-dusk .duration, .process-step.grad-sunset .duration,
.how-step.grad-ocean .num, .how-step.grad-reef .num,
.how-step.grad-dusk .num, .how-step.grad-sunset .num {
  border-color: var(--card-hue);
  color: var(--card-hue);
}
.how-step.grad-ocean .num, .how-step.grad-reef .num,
.how-step.grad-dusk .num, .how-step.grad-sunset .num {
  background: color-mix(in srgb, var(--card-hue) 14%, var(--card));
}
.process-step.grad-ocean::before, .process-step.grad-reef::before,
.process-step.grad-dusk::before, .process-step.grad-sunset::before,
.how-step.grad-ocean::before, .how-step.grad-reef::before,
.how-step.grad-dusk::before, .how-step.grad-sunset::before {
  background: var(--card-hue);
  border-color: var(--card-hue);
}