:root {
  --ops-surface-2: #f8faf9;
  --ops-surface-3: #eef2f0;
  --ops-border: color-mix(in srgb, var(--line, #d8dee6) 88%, #82928a);
  --ops-border-strong: color-mix(in srgb, var(--line-strong, #bac4d0) 82%, #66766e);
  --ops-radius-control: 8px;
  --ops-radius-panel: 10px;
  --ops-shadow-panel: 0 1px 2px rgba(18, 31, 25, 0.05), 0 14px 38px rgba(18, 31, 25, 0.055);
  --ops-shadow-float: 0 24px 72px rgba(18, 31, 25, 0.22);
  --ops-focus: color-mix(in srgb, var(--brand-accent, var(--green, #167a58)) 30%, transparent);
  --ops-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
  background: var(--bg, #f4f6f8);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: 2px;
}

:where(button, .button, .primary-button, .secondary-button, .icon-button, .nav-item, .sidebar-tab) {
  transition:
    background-color 180ms var(--ops-ease),
    border-color 180ms var(--ops-ease),
    box-shadow 180ms var(--ops-ease),
    color 180ms var(--ops-ease),
    transform 180ms var(--ops-ease);
}

:where(button, .button, .primary-button, .secondary-button, .icon-button):not(:disabled):active {
  transform: translateY(1px);
}

:where(input, select, textarea) {
  transition:
    background-color 180ms var(--ops-ease),
    border-color 180ms var(--ops-ease),
    box-shadow 180ms var(--ops-ease);
}

:where(input, select, textarea):not(:disabled):hover {
  border-color: var(--ops-border-strong);
}

:where(table) {
  font-variant-numeric: tabular-nums;
}

:where(table tbody tr) {
  transition: background-color 160ms var(--ops-ease);
}

:where(table tbody tr):hover {
  background: color-mix(in srgb, var(--brand-accent-soft, var(--green-soft, #e5f5ed)) 36%, transparent);
}

:where(dialog, .modal-card, .platform-dialog-card, .accounting-dialog-card) {
  box-shadow: var(--ops-shadow-float);
}

:where(.status-pill, .role-pill, .security-badge, .tag, .badge) {
  font-variant-numeric: tabular-nums;
}

/* Shared authentication posture: recognizable brand, restrained depth, clear focus. */
:where(.auth-card, .login-card, .platform-auth-card, .auth-panel) {
  position: relative;
  overflow: hidden;
  border-color: var(--ops-border);
  box-shadow: var(--ops-shadow-panel);
}

:where(.auth-card, .login-card, .platform-auth-card, .auth-panel)::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brand-accent, var(--green, #167a58));
  content: "";
}

:where(.crm-brand-logo, [data-brand-logo]) {
  image-rendering: auto;
}

/* Main and taxi shells retain their current geometry while gaining orientation. */
:where(.sidebar-tab, .nav-item, .app-nav button):not(.active):not([aria-current="page"]):hover {
  transform: translateX(1px);
}

:where(.sidebar-tab.active, .nav-item.active, .app-nav button[aria-current="page"]) {
  box-shadow: inset 2px 0 0 var(--brand-accent, var(--green, #167a58));
}

:where(.metric-card, .panel, .workspace-panel, .setup-card, .module-card, .debt-card) {
  border-color: var(--ops-border);
}

:where(.metric-card, .panel, .workspace-panel) {
  box-shadow: var(--ops-shadow-panel);
}

:where(.metric-card, .module-tile, .client-card, .vehicle-card, .debt-card):hover {
  border-color: var(--ops-border-strong);
}

/* Platform admin: teal is an orientation accent, never a second product system. */
body[data-brand-surface="admin"] {
  --ops-surface-2: #f5f9f8;
  --ops-surface-3: #e9f1ef;
}

body[data-brand-surface="admin"] :where(.platform-card, .client-card, .configuration-panel) {
  border-color: var(--ops-border);
  box-shadow: var(--ops-shadow-panel);
}

/* Organization shells share components; only the route brand changes the accent. */
body[data-brand-surface="organization"] :where(.welcome-panel, .metric-grid article, .module-page > header, .module-slot) {
  border-color: var(--ops-border);
}

body[data-brand-surface="organization"] :where(.module-tile, .feature-grid article, .accounting-obligation) {
  transition:
    background-color 180ms var(--ops-ease),
    border-color 180ms var(--ops-ease),
    box-shadow 180ms var(--ops-ease),
    transform 180ms var(--ops-ease);
}

body[data-brand-surface="organization"] :where(.module-tile, .feature-grid article, .accounting-obligation):hover {
  border-color: var(--ops-border-strong);
  transform: translateY(-1px);
}

/* Service Daily stays operational and compact, with the same feedback grammar. */
body[data-design-surface="service-daily"] {
  --brand-accent: #147a55;
  --brand-accent-strong: #106746;
  --brand-accent-soft: #e7f5ee;
  --ops-surface-2: #f6f8f7;
  --ops-surface-3: #e9eeeb;
}

body[data-design-surface="service-daily"] :where(.workspace-card, .summary-card, .debt-card, .history-list, .modal-card) {
  border-color: var(--ops-border);
}

body[data-design-surface="service-daily"] :where(.operation-row, .history-row, .debt-card) {
  transition:
    background-color 180ms var(--ops-ease),
    border-color 180ms var(--ops-ease),
    box-shadow 180ms var(--ops-ease);
}

@media (hover: hover) and (pointer: fine) {
  :where(.primary-button, .button.primary, button[type="submit"]):not(:disabled):hover {
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand-accent-strong, var(--green, #167a58)) 22%, transparent);
    transform: translateY(-1px);
  }
}

@media (max-width: 680px) {
  :root {
    --ops-shadow-panel: 0 1px 2px rgba(18, 31, 25, 0.045);
  }

  :where(.metric-card, .panel, .workspace-panel) {
    box-shadow: var(--ops-shadow-panel);
  }

  :where(button, .button, .primary-button, .secondary-button) {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  :where(button, .button, .primary-button, .secondary-button, .icon-button, .nav-item, .sidebar-tab):hover {
    transform: none !important;
  }
}