/*
 * Design tokens — Marque Quadras (docs/design/README.md).
 * primary/secondary vêm do tenant (injetados em runtime por TenantThemeProvider);
 * neutros e semânticos são fixos. Seletores html[...] vencem os :root do Bootstrap.
 */

/* Temas de exemplo do handoff (seed/dev) */
html[data-tenant="arena-sol"]:root {
  --bs-primary: #F97316; --bs-primary-rgb: 249, 115, 22;
  --bs-secondary: #1E3A5F; --bs-secondary-rgb: 30, 58, 95;
}
html[data-tenant="quadra-central"]:root {
  --bs-primary: #16A34A; --bs-primary-rgb: 22, 163, 74;
  --bs-secondary: #374151; --bs-secondary-rgb: 55, 65, 81;
}

html {
  --mq-on-primary: #ffffff;   /* texto sobre a primária é sempre branco (decisão de produto) */
  --mq-on-secondary: #ffffff;

  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.5;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-pill: 999px;

  --bs-success: #16A34A; --bs-success-rgb: 22, 163, 74;
  --bs-warning: #F59E0B; --bs-warning-rgb: 245, 158, 11;
  --bs-danger:  #DC2626; --bs-danger-rgb: 220, 38, 38;

  --mq-shadow-bottom-bar: 0 -8px 24px rgba(0,0,0,.08);
  --mq-shadow-toast: 0 8px 24px rgba(0,0,0,.10);
  --mq-shadow-fab: 0 8px 24px rgba(0,0,0,.18);
  --mq-shadow-offcanvas: -16px 0 48px rgba(0,0,0,.18);
}

/* Neutros e derivados — claro */
html[data-bs-theme="light"], html:not([data-bs-theme]) {
  --bs-body-bg: #FFFFFF; --bs-body-bg-rgb: 255, 255, 255;
  --bs-card-bg: #FFFFFF;
  --bs-body-color: #111827; --bs-body-color-rgb: 17, 24, 39;
  --bs-emphasis-color: #111827;
  --bs-secondary-color: #6B7280;
  --bs-tertiary-bg: #F3F4F6; --bs-tertiary-bg-rgb: 243, 244, 246;
  --bs-border-color: #E5E7EB;
  --mq-card-bg: #FFFFFF;
  --mq-admin-bg: #F7F7F8;

  --bs-primary-text-emphasis: color-mix(in oklab, var(--bs-primary) 65%, black);
  --bs-primary-bg-subtle: color-mix(in oklab, var(--bs-primary) 12%, white);
  --bs-primary-border-subtle: color-mix(in oklab, var(--bs-primary) 35%, white);

  --bs-success-text-emphasis: #15803D; --bs-success-bg-subtle: #DCFCE7; --bs-success-border-subtle: #86EFAC;
  --bs-warning-text-emphasis: #B45309; --bs-warning-bg-subtle: #FEF3C7; --bs-warning-border-subtle: #FCD34D;
  --bs-danger-text-emphasis:  #B91C1C; --bs-danger-bg-subtle:  #FEE2E2; --bs-danger-border-subtle:  #FCA5A5;
}

/* Neutros e derivados — escuro */
html[data-bs-theme="dark"] {
  --bs-body-bg: #0F141A; --bs-body-bg-rgb: 15, 20, 26;
  --bs-card-bg: #171E27;
  --bs-body-color: #F3F4F6; --bs-body-color-rgb: 243, 244, 246;
  --bs-emphasis-color: #F3F4F6;
  --bs-secondary-color: #9CA3AF;
  --bs-tertiary-bg: #1F2833; --bs-tertiary-bg-rgb: 31, 40, 51;
  --bs-border-color: #2A3441;
  --mq-card-bg: #171E27;
  --mq-admin-bg: #0F141A;

  --bs-primary-text-emphasis: color-mix(in oklab, var(--bs-primary) 70%, white);
  --bs-primary-bg-subtle: color-mix(in oklab, var(--bs-primary) 20%, #0F141A);
  --bs-primary-border-subtle: color-mix(in oklab, var(--bs-primary) 45%, #0F141A);

  --bs-success-text-emphasis: #4ADE80; --bs-success-bg-subtle: #14532D; --bs-success-border-subtle: #166534;
  --bs-warning-text-emphasis: #FBBF24; --bs-warning-bg-subtle: #78350F; --bs-warning-border-subtle: #92400E;
  --bs-danger-text-emphasis:  #F87171; --bs-danger-bg-subtle:  #7F1D1D; --bs-danger-border-subtle:  #991B1B;
}

/*
 * O Bootstrap compila as cores dos botões/controles em valores fixos;
 * aqui eles passam a ler os tokens do tenant.
 */
.btn-primary {
  --bs-btn-color: var(--mq-on-primary);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--mq-on-primary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary) 88%, black);
  --bs-btn-active-color: var(--mq-on-primary);
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 80%, black);
  --bs-btn-disabled-color: var(--mq-on-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  font-weight: 700;
}
.btn-secondary {
  --bs-btn-color: var(--mq-on-secondary);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--mq-on-secondary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-secondary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-secondary) 88%, black);
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-secondary) 80%, black);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--mq-on-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--mq-on-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
/* Outline neutro (botões secundários do handoff) */
.btn-outline-neutral {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--mq-card-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
  font-weight: 600;
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-danger) 88%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-danger) 88%, black);
  font-weight: 700;
}
.btn { --bs-btn-border-radius: var(--bs-border-radius-sm); --bs-btn-font-weight: 600; min-height: 44px; }
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1rem; min-height: 52px; }

.form-control, .form-select { min-height: 48px; border-radius: var(--bs-border-radius-sm); }
.form-control-sm, .form-select-sm { min-height: 44px; }

/* iPhone/Android: toques rápidos não ampliam a página (zoom de toque duplo) e o atraso de clique some. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
/* touch-action não atravessa contêineres com rolagem (ex.: chips horizontais): repete nos alvos de toque. */
a, button, [role="button"], [role="option"], [role="radio"], [role="tab"], input, select, textarea, label { touch-action: manipulation; }
/* iOS amplia a tela ao focar campo com fonte < 16px: em telas de toque, todo campo tem 16px. */
@media (pointer: coarse) {
  .form-control, .form-control-sm, .form-select, .form-select-sm, textarea { font-size: 16px; }
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-switch .form-check-input:checked { background-color: var(--bs-success); border-color: var(--bs-success); }
.form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.progress { --bs-progress-bar-bg: var(--bs-primary); --bs-progress-bg: var(--bs-tertiary-bg); }
.card { --bs-card-bg: var(--mq-card-bg); --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: var(--bs-border-radius); }
.list-group { --bs-list-group-bg: var(--mq-card-bg); }
.offcanvas, .modal-content, .toast { --bs-offcanvas-bg: var(--mq-card-bg); --bs-modal-bg: var(--mq-card-bg); --bs-toast-bg: var(--mq-card-bg); }
.spinner-border-primary { border-color: var(--bs-border-color); border-top-color: var(--bs-primary); animation-duration: .9s; }

/* Underline tabs: ativa em primary-emphasis com borda 2px primária */
.nav-underline .nav-link { color: var(--bs-secondary-color); font-weight: 600; min-height: 44px; }
.nav-underline .nav-link.active { color: var(--bs-primary-text-emphasis); border-bottom: 2px solid var(--bs-primary); font-weight: 700; }
.nav-underline.nav-neutral .nav-link.active { color: var(--bs-body-color); border-bottom-color: var(--bs-body-color); }

a { color: var(--bs-primary-text-emphasis); }
.btn-link {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-color: var(--bs-primary-text-emphasis);
  text-decoration: none;
}
.btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-success) 88%, black); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-success) 88%, black); --bs-btn-active-bg: color-mix(in oklab, var(--bs-success) 80%, black); font-weight: 700; }