/* =============================================================================
   BadgeLocker design tokens for plain HTML.
   Colors, type, radius and focus styles mapped onto Bootstrap 5.
   ============================================================================= */

:root {
  /* Core palette */
  --bl-purple-100: #f0eef8;
  --bl-purple-200: #e1ddf1;
  --bl-purple-300: #c2bce4;
  --bl-purple-500: #847aca;
  --bl-purple-600: #6559bd;
  --bl-purple-700: #4a3d8f;
  --bl-purple-800: #352a6b;
  --bl-purple-900: #201a56;
  --bl-blue-100: #d5eaff;
  --bl-blue-300: #7ed5ff;
  --bl-blue-400: #28aae1;
  --bl-blue-600: #1a7bb0;
  --bl-blue-700: #156b9c;
  --bl-gray-50: #f8f9fa;
  --bl-gray-100: #e9ecef;
  --bl-gray-200: #e5e6e7;
  --bl-gray-300: #bbbbbc;
  --bl-gray-600: #6c757d;
  --bl-gray-700: #666666;
  --bl-gray-850: #333333;
  --bl-gray-900: #212529;

  /* Semantic */
  --surface-page: #ffffff;
  --surface-container: #ffffff;
  --surface-subtle: var(--bl-gray-50);
  --surface-brand-tint: var(--bl-purple-100);
  --text-primary: var(--bl-gray-900);
  --text-secondary: #555b62;
  --text-brand: var(--bl-purple-900);
  --border-subtle: var(--bl-gray-200);
  --action-primary: var(--bl-purple-600);
  --action-primary-hover: var(--bl-purple-700);
  --brand-purple: var(--bl-purple-900);
  --brand-blue: var(--bl-blue-400);
  --focus-ring: color-mix(in srgb, var(--bl-purple-600) 35%, transparent);

  /* Type, radius, motion */
  --font-base: 'Noto Sans', -apple-system, Roboto, Helvetica, sans-serif;
  --radius-component: 4px;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;
  --shadow-card: 0 1px 2px rgb(32 26 86 / 6%), 0 8px 24px rgb(32 26 86 / 8%);
  --transition-normal: 0.2s ease;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-base);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-page);
  --bs-secondary-color: var(--text-secondary);
  --bs-border-color: var(--border-subtle);
  --bs-link-color-rgb: 101, 89, 189;
  --bs-link-hover-color-rgb: 74, 61, 143;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-page: #14112e;
    --surface-container: #1d1940;
    --surface-subtle: #19153a;
    --surface-brand-tint: #231e4d;
    --text-primary: #e9ecef;
    --text-secondary: #bbbbbc;
    --text-brand: #e1ddf1;
    --border-subtle: #332d63;
    --action-primary: var(--bl-purple-500);
    --action-primary-hover: var(--bl-purple-300);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
    --bs-link-color-rgb: 194, 188, 228;
    --bs-link-hover-color-rgb: 225, 221, 241;
    color-scheme: dark;
  }
}

body {
  font-family: var(--font-base);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-brand); letter-spacing: -0.01em; }
.text-body-secondary { color: var(--text-secondary) !important; }

/* ---- Buttons: 4px radius, purple-600 action, focus ring ---- */
.btn {
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: var(--radius-component);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem var(--focus-ring) !important; }
.btn-secondary { background: var(--action-primary); border-color: var(--action-primary); color: #fff; }
.btn-secondary:hover:not(:disabled), .btn-secondary:active:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: #fff; }
.btn-on-dark { background: #fff; border-color: #fff; color: var(--bl-purple-900); }
.btn-on-dark:hover:not(:disabled) { background: var(--bl-purple-100); border-color: var(--bl-purple-100); color: var(--bl-purple-900); }
.btn-ghost-light { color: #fff; border-color: rgb(255 255 255 / 45%); }
.btn-ghost-light:hover { color: var(--bl-purple-900); background: #fff; border-color: #fff; }

/* ---- Forms ---- */
.form-control {
  border-radius: var(--radius-component);
  background: var(--surface-container);
  color: var(--text-primary);
  border-color: var(--bl-gray-300);
}
.form-control:focus { border-color: var(--action-primary); box-shadow: 0 0 0 0.25rem var(--focus-ring); background: var(--surface-container); color: var(--text-primary); }
.form-label { font-weight: 600; font-size: 14px; color: var(--text-primary); }

/* ---- Cards ---- */
.bl-card {
  background: var(--surface-container);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---- Brand lockup (docs/brand.md: gap 0.3× mark, text 0.72× mark) ---- */
.bl-logo { --s: 32px; display: inline-flex; align-items: center; gap: calc(var(--s) * 0.3); color: var(--brand-purple); text-decoration: none; line-height: 1; }
.bl-logo svg { width: var(--s); height: var(--s); flex-shrink: 0; }
.bl-logo__word { font-size: calc(var(--s) * 0.72); letter-spacing: -0.02em; white-space: nowrap; }
.bl-logo__word b { font-weight: 800; }
.bl-logo__word span { font-weight: 500; }
.bl-logo .ring { fill: var(--brand-purple); }
.bl-logo .core { fill: var(--brand-blue); }
.bl-logo--reversed { color: #fff; }
.bl-logo--reversed .ring { fill: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bl-logo { color: #fff; }
  :root:not([data-theme='light']) .bl-logo .ring { fill: #fff; }
}

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }