/* binds.co rebrand tokens (phase 1) */

.binds-rebrand {
  /* brand */
  /* Paleta oficial binds.co (UI COLORs) */
  --binds-primary: #673ab7;         /* UI COLOR 2 */
  --binds-primary-rgb: 103, 58, 183;
  --binds-primary-200: #af9ad6;     /* UI COLOR 0 */
  --binds-primary-400: #9871dd;     /* UI COLOR 1 */
  --binds-primary-600: #64469d;     /* UI COLOR 3 */
  --binds-primary-700: #3f3356;     /* UI COLOR 4 */

  /* accents (Pink + Teal) */
  --binds-accent: #ed4d7f;          /* PINK 1 */
  --binds-accent-rgb: 237, 77, 127;
  --binds-accent-700: #ca1e54;      /* PINK 2 */
  --binds-teal: #00aaa7;            /* GREEN 0 */
  --binds-teal-rgb: 0, 170, 167;

  /* semantic */
  --binds-success: var(--binds-teal);
  --binds-warning: #ffb500;         /* YELLOW 0 */
  --binds-danger: var(--binds-accent-700);

  /* surfaces */
  --binds-bg: #eff3f8;              /* BG COLOR */
  --binds-surface: #ffffff;
  --binds-surface-2: #eff3f8;
  --binds-surface-3: rgba(103, 58, 183, 0.08);
  --binds-border: rgba(15, 23, 42, 0.12);

  /* text */
  --binds-text: #0b1220;
  --binds-text-2: rgba(11, 18, 32, 0.72);
  --binds-text-3: rgba(11, 18, 32, 0.56);
  --binds-on-dark: rgba(255, 255, 255, 0.92);
  --binds-on-dark-2: rgba(255, 255, 255, 0.72);

  /* typography */
  --binds-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --binds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* radii */
  --binds-radius-sm: 10px;
  --binds-radius-md: 14px;
  --binds-radius-lg: 18px;
  --binds-radius-xl: 24px;

  /* shadows */
  --binds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --binds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.10);
  --binds-shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.16);

  /* layout */
  --binds-container: 1120px;
  --binds-gutter: 24px;
}

/* Apply tokens to base system */
.binds-rebrand body,
body.binds-rebrand {
  font-family: var(--binds-font-sans) !important;
  color: var(--binds-text);
  background: var(--binds-bg) !important;
}

.binds-rebrand :focus-visible {
  outline: 3px solid rgba(var(--binds-primary-rgb), 0.35);
  outline-offset: 2px;
}

/* Bootstrap variable overrides (keeps existing markup working) */
.binds-rebrand {
  --bs-primary: var(--binds-primary);
  --bs-secondary: #334155;
  --bs-success: var(--binds-success);
  --bs-warning: var(--binds-warning);
  --bs-danger: var(--binds-danger);
  --bs-dark: #0b1220;
  --bs-light: #f1f5f9;
}

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