/* Uber Pulse design tokens
 * Extracted from hardcoded hex/pixel literals scattered across
 * "index.html" (base <style> block + shared JS style-builder
 * functions). This is a value-for-value extraction for a demo build —
 * not a full design-system migration.
 */
:root {
  /* Brand — black/white are default UI colors; green is reserved for
     status-positive states, the logo mark, and the Contribute action. */
  --color-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-green: #06C167;
  --color-green-hover: #067A3E; /* link/hover-weight green used in text links */
  --color-green-hover-dark: #04562B;

  /* Neutral gray ramp.
     Note: #9B9B9B was merged into #6B6B6B here (approved Should-tier
     backlog item — #9B9B9B was a WCAG contrast failure at 2.7:1). */
  --color-gray-50: #F6F6F6;
  --color-gray-100: #EFEFEF;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D0D0D0;
  --color-gray-600: #6B6B6B;
  --color-gray-700: #5A5A5A;

  /* LOB badge colors (background / foreground pairs) */
  --color-lob-ridesharing-bg: #DCEBF7;
  --color-lob-ridesharing-fg: #1D6FA5;
  --color-lob-eats-bg: #FBE8D8;
  --color-lob-eats-fg: #B45F06;
  --color-lob-b2b-bg: #EDE3F7;
  --color-lob-b2b-fg: #6B3FA0;
  --color-lob-platform-bg: #EFEFEF;
  --color-lob-platform-fg: #5A5A5A;

  /* Status colors (background / foreground pairs) */
  --color-status-green-bg: #DFF3E6;
  --color-status-green-fg: #067A3E;
  --color-status-amber-bg: #FCEFDC;
  --color-status-amber-fg: #96530A;
  --color-status-red-bg: #FBE9E6;
  --color-status-red-fg: #A93327;
  --color-status-neutral-bg: #EFEFEF;
  --color-status-neutral-fg: #6B6B6B;

  /* Roadmap stage colors (background / foreground pairs) */
  --color-roadmap-submitted-bg: #DCEBF7;
  --color-roadmap-submitted-fg: #1D6FA5;
  --color-roadmap-defining-bg: #FCEFDC;
  --color-roadmap-defining-fg: #96530A;
  --color-roadmap-next-bg: #EDE3F7;
  --color-roadmap-next-fg: #6B3FA0;
  --color-roadmap-shipped-bg: #DFF3E6;
  --color-roadmap-shipped-fg: #067A3E;

  /* 8px spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;

  /* Body-text type scale (near-duplicate sizes collapsed to one value per tier —
     applied app-wide Aug 2026, see docs/backlog.md for the pre-collapse audit). */
  --font-size-2xs: 10px;   /* was 10px / 10.5px */
  --font-size-xs: 11px;    /* was 11px / 11.5px */
  --font-size-sm: 12px;    /* was 12px / 12.5px / 13px */
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 19px;

  /* Display type scale — large one-off numerals (KPI values, hero stats).
     Not collapsed like the body scale above since each size is a deliberate,
     distinct step, not drift. */
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;

  /* Font weight scale */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  /* Heading/body typographic roles — the actual named hierarchy (h1/h2/h3/body).
     Aliased onto the raw scale above so there's one place that defines "what size
     is a page title" vs. "what size is 24px" — use these for real heading/paragraph
     elements; keep using the raw --font-size-* scale for non-heading text (chips,
     buttons, table cells, badges) where a heading role doesn't apply. */
  --font-size-h1: var(--font-size-24);       /* page/detail-page title */
  --font-weight-h1: var(--font-weight-heavy);
  --font-size-h2: var(--font-size-16);       /* card/panel/side-sheet section title */
  --font-weight-h2: var(--font-weight-bold);
  --font-size-h3: var(--font-size-md);       /* subsection / wizard-step title */
  --font-weight-h3: var(--font-weight-bold);
  --font-size-body-lead: var(--font-size-base); /* primary definition/description paragraph */
  --font-size-body: var(--font-size-sm);        /* standard body/paragraph text */
  --font-weight-body: var(--font-weight-regular);
  --font-size-logo: var(--font-size-lg);        /* "Pulse for Uber" wordmark, login + app topbar */
  --font-weight-logo: var(--font-weight-bold);

  /* Border radius — 12px page-level, 8px inline (backlog: standardize component radius) */
  --radius-page: 12px;
  --radius-inline: 8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Default hairline border color — previously used raw (#E5E5E5) on ~40+ cards/inputs/buttons */
  --color-border-default: var(--color-gray-200);

  /* Motion — kept short and consistent; used for hover/focus/press feedback
     and the small number of enter animations (side sheets, sheet overlays). */
  --transition-fast: 140ms ease;
  --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
 * Layout utilities
 * ------------------------------------------------------------------- */
.flex-row { display: flex; align-items: center; }
.flex-row-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.inline-flex { display: inline-flex; }
.text-muted { color: var(--color-gray-600); }
.text-default { color: var(--color-black); }

.gap-6 { gap: 6px; }
.gap-8 { gap: var(--space-2); }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }

/* ---------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-page);
  padding: 18px;
  margin-bottom: 20px;
  transition: border-color var(--transition-fast);
}
.card:hover {
  border-color: var(--color-gray-300);
}

/* ---------------------------------------------------------------------
 * Chip / pill / badge shape — pair with existing status/LOB/roadmap
 * bg+fg token pairs for color; this class only sets the shape.
 * ------------------------------------------------------------------- */
.chip-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: var(--font-size-sm);
}

/* ---------------------------------------------------------------------
 * Eyebrow label (uppercase section/field label)
 * ------------------------------------------------------------------- */
.label-eyebrow {
  display: block;
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.label-eyebrow.text-2xs { font-size: var(--font-size-2xs); }
.label-eyebrow.text-sm { font-size: var(--font-size-sm); }

/* ---------------------------------------------------------------------
 * Form input
 * ------------------------------------------------------------------- */
.form-input {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-inline);
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
}
.form-input:focus {
  border-color: var(--color-black);
  outline: none;
}

/* ---------------------------------------------------------------------
 * Headings
 * ------------------------------------------------------------------- */
.title-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}
.title-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
}
.title-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
}

/* ---------------------------------------------------------------------
 * Round icon button (32x32)
 * ------------------------------------------------------------------- */
.btn-icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.btn-icon-round:hover {
  border-color: var(--color-gray-300);
}
.btn-icon-round:active {
  transform: scale(0.93);
}

/* ---------------------------------------------------------------------
 * Sidebar nav item
 * ------------------------------------------------------------------- */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Motion — global interactive feedback and panel enter animation.
 * Deliberately restrained: opacity/border/transform only, no drop
 * shadows, matching the hairline-border visual identity.
 * ------------------------------------------------------------------- */
button {
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
button:not(:disabled):hover {
  opacity: 0.82;
}
button:not(:disabled):active {
  transform: scale(0.97);
  opacity: 1;
}
button:disabled {
  cursor: not-allowed;
}

[style*="cursor:pointer"] {
  transition: opacity var(--transition-fast);
}
[style*="cursor:pointer"]:hover {
  opacity: 0.85;
}

@keyframes panel-slide-in {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.pulse-side-sheet {
  animation: panel-slide-in var(--transition-base);
}