/*
 * AUTO-SYNCED from packages/ui/src/tokens.css
 * Não editar este arquivo diretamente. Editar a fonte canônica e re-rodar:
 *   cp packages/ui/src/tokens.css apps/backstage/public/static/_tokens.css
 */

/* @bm/ui — Design tokens (Backstage Light Mode v1) */
:root {
  /* ==================== BACKGROUNDS ==================== */
  --bg-primary: #ffffff;
  --bg-secondary: #fafaf9;
  --bg-surface: #f5f3ef;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.45);
  --bg-success: #ecfdf5;
  --bg-warning: #fef3c7;
  --bg-error: #fee2e2;
  --bg-info: #eff6ff;

  /* ==================== BORDERS ==================== */
  --border-subtle: #e7e5e0;
  --border-default: #d6d3ce;
  --border-strong: #a8a29e;
  --border-brand: #0e8c5e;

  /* ==================== TEXT ==================== */
  --text-primary: #0a0a0a; /* 22:1 */
  --text-secondary: #4b5563; /* 8.2:1 */
  --text-tertiary: #6b7280; /* 5.8:1 */
  --text-disabled: #a8a8a0;
  --text-inverse: #ffffff;

  /* ==================== BRAND ==================== */
  --brand-primary: #0e8c5e; /* 6.8:1 */
  --brand-secondary: #2fe3a0;
  --brand-dark: #064a33; /* 12:1 */

  /* ==================== STATUS ==================== */
  --color-success: #15803d; /* 7.1:1 */
  --color-warning: #b84c0c; /* 5.1:1 */
  --color-error: #b91c1c; /* 4.8:1 */
  --color-info: #1e40af; /* 8.2:1 */

  /* ==================== SHADOWS ==================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(10, 10, 10, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06),
    0 1px 3px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 6px rgba(10, 10, 10, 0.08),
    0 2px 4px rgba(10, 10, 10, 0.05);
  --shadow-lg: 0 10px 15px rgba(10, 10, 10, 0.1),
    0 4px 6px rgba(10, 10, 10, 0.05);
  --shadow-xl: 0 20px 25px rgba(10, 10, 10, 0.12),
    0 8px 10px rgba(10, 10, 10, 0.06);
  --shadow-2xl: 0 25px 50px rgba(10, 10, 10, 0.15),
    0 10px 20px rgba(10, 10, 10, 0.08);
  --shadow-glow: 0 0 20px rgba(47, 227, 160, 0.15);

  /* ==================== RADIUS ==================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* ==================== SPACING ==================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==================== TYPOGRAPHY ==================== */
  --font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-family-serif: "Fraunces", "Times New Roman", serif;
  --font-family-brand: "Archivo Black", "Archivo", sans-serif;

  /* ==================== ICONS ==================== */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-stroke: 1.5px;

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.2s ease-out;
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== LEGACY ALIASES (DEPRECATE Q4) ==================== */
  /* Aliases curtos antigos */
  --fg: var(--text-primary);
  --fgm: var(--text-secondary);
  --fgd: var(--text-tertiary);
  --bdr: var(--border-default);
  --bdr2: var(--border-strong);
  --ma: var(--brand-primary);
  --mab: var(--brand-secondary);
  --pu: var(--brand-dark);
  --shadow: var(--shadow-md);
  --shadow-elev: var(--shadow-lg);
  --ok: var(--color-success);
  --warn: var(--color-warning);
  --err: var(--color-error);
  --info: var(--color-info);

  /* Aliases dos HTMLs legados (ink/muted/hairline/mint/surface) */
  --bg: var(--bg-primary);
  --surface: var(--bg-primary);
  --surface-soft: var(--bg-surface);
  --card: var(--bg-primary);
  --card2: var(--bg-secondary);
  --card3: var(--bg-surface);
  --ink: var(--text-primary);
  --ink-soft: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-2: var(--text-tertiary);
  --hairline: var(--border-default);
  --hairline-strong: var(--border-strong);
  --mint: var(--brand-secondary);
  --mint-pale: var(--bg-success);
  --mint-deep: var(--brand-primary);
  --mint-ink: var(--brand-dark);
  --shadow-soft: var(--shadow-sm);
}

html.theme-light,
html[data-theme="light"] {
  color-scheme: light;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ==================== FOCUS RINGS ==================== */
button,
a[role="button"],
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
a[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==================== TOUCH TARGETS ==================== */
@media (max-width: 768px) {
  button,
  a[role="button"],
  input[type="checkbox"],
  input[type="radio"],
  .btn,
  .btn-icon {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  input,
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
    padding: 12px 16px;
  }
}

@supports (padding: max(0px)) {
  body,
  .bmnav,
  header,
  footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ==================== TYPOGRAPHY (Sprint 1.9) ==================== */
h1,
.h1 {
  font-family: var(--font-family-ui);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
h2,
.h2 {
  font-family: var(--font-family-ui);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
label,
.label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.text-secondary {
  color: var(--text-secondary);
  font-weight: 500;
}
.text-tertiary {
  color: var(--text-tertiary);
  font-size: 0.813rem;
}

/* ==================== POLISH (Sprint 1.11-1.30) ==================== */

/* 1.11 — hover lift em cards KPI */
.fin-k,
.kpi-card {
  transition: transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.fin-k:hover,
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 1.13 — status pill 24px height */
.ev-status,
.status-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ev-status.is-success,
.status-pill[data-tone="success"] {
  background: var(--bg-success);
  color: var(--color-success);
}
.ev-status.is-warning,
.status-pill[data-tone="warning"] {
  background: var(--bg-warning);
  color: var(--color-warning);
}
.ev-status.is-error,
.status-pill[data-tone="error"] {
  background: var(--bg-error);
  color: var(--color-error);
}

/* 1.16 — disabled state default */
button[disabled],
.btn[disabled],
.btn-icon[disabled],
.btn-sec[disabled] {
  opacity: 0.5;
  background: var(--bg-surface);
  cursor: not-allowed;
}

/* 1.18 — card border visible */
.card,
.ev {
  border: 1px solid var(--border-default);
}

/* 1.19 — modal backdrop */
.modal-backdrop,
.modal.show::before {
  background: var(--bg-overlay);
}

/* 1.21 — sticky header border */
header[data-sticky],
.bmnav-sticky,
.sticky-top {
  border-bottom: 1px solid var(--border-default);
}

/* 1.27 — link hover underline */
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-secondary);
  text-underline-offset: 2px;
}

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