/*
 * BaseLock Public-Page CSS Bridge
 * Maps landing-era token names → app-tokens --bl-* so public pages
 * (plans, documentation, login, register) respond to the same
 * data-theme="dark" attribute that the dashboard uses.
 *
 * Load order: styles.css → app-tokens.css → app-public.css
 */

@layer bridge-tokens, bridge-overrides;

@layer bridge-tokens {
  /* Light-mode (default) aliases */
  :root {
    --bg-primary:      var(--bl-bg);
    --bg-secondary:    var(--bl-bg-secondary);
    --bg-tertiary:     var(--bl-bg-tertiary);
    --text-primary:    var(--bl-text);
    --text-secondary:  var(--bl-text-secondary);
    --text-tertiary:   var(--bl-text-muted);
    --border:          var(--bl-border);
    --surface:         var(--bl-surface);
    --surface-secondary: var(--bl-surface-alt);
    --accent:          var(--bl-accent);
    --primary-color:   var(--bl-primary);
  }

  /* Dark-mode overrides — fired by app-tokens.css html[data-theme="dark"] */
  html[data-theme="dark"] {
    --bg-primary:      var(--bl-bg);
    --bg-secondary:    var(--bl-bg-secondary);
    --bg-tertiary:     var(--bl-bg-tertiary);
    --text-primary:    var(--bl-text);
    --text-secondary:  var(--bl-text-secondary);
    --text-tertiary:   var(--bl-text-muted);
    --border:          var(--bl-border);
    --surface:         var(--bl-surface);
    --surface-secondary: var(--bl-surface-alt);
    --accent:          var(--bl-accent, var(--bl-primary));
    --primary-color:   var(--bl-primary);
    color-scheme: dark;
  }
}

@layer bridge-overrides {
  /* Login OTP focus: was #667eea hardcoded, now brand token */
  .bl-otp-input:focus,
  .bl-otp-input:focus-visible {
    border-color: var(--bl-primary) !important;
    box-shadow: 0 0 0 3px rgb(from var(--bl-primary) r g b / 0.15) !important;
    outline: none;
  }

  /* Register progress bar: was gradient, now solid brand token */
  .bl-progress-bar {
    background: var(--bl-primary);
  }

  /* Skip link — M4 will add the <a> element; we only position it here */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bl-primary);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 4px 0;
  }
  .skip-link:focus { top: 0; }

  /* Suppress transition flash until app-tokens marks the doc ready */
  html:not([data-ready]) * { transition: none !important; }

  /* Subtitle line under the auth card heading. */
  .auth-card__subtitle {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--bl-text-secondary);
    line-height: 1.45;
  }

  /* Phone-number field with a `+1` prefix tile — themed so it follows
     light/dark mode like the rest of the auth card. */
  .auth-phone-field {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }

  .auth-phone-field__prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bl-surface-alt);
    border: 1px solid var(--bl-border);
    border-radius: 6px;
    color: var(--bl-text-secondary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .auth-phone-field > input[type="tel"] {
    flex: 1;
    min-width: 0;
  }
}