/* ============================================================
   Business Presence+ · dark theme layer
   ------------------------------------------------------------
   Loaded AFTER tokens.css. Light mode is untouched — the brand
   kit stays the source of truth. Dark redefines the same tokens
   so component CSS never needs a second rule.

   Two rules preserved from the brand:
   · Navy is structure, orange is the record and the primary
     action. Orange is lifted a step for contrast on dark, not
     re-hued.
   · ND Red, Steel Blue and the NA gradient stay reserved and
     appear nowhere.

   --bp-surface is introduced here because --bp-white does double
   duty in the light kit: a card background AND text on navy. Only
   the first should flip, so surfaces use --bp-surface and
   text-on-colour keeps --bp-white.
   ============================================================ */

:root {
  --bp-surface: #FFFFFF;   /* cards, inputs, top bar, tiles */
  --bp-surface-2: #FAFAFC; /* subtle raised surface          */

  /* Headings and emphatic text on a LIGHT surface. In the light kit this is
     navy-500, but navy-500 is also the sidebar ground — so in dark the ground
     goes darker while this must go light. They cannot be the same token. */
  --bp-heading: var(--bp-navy-500);

  /* Label on a filled success chip. The success colour itself lightens in dark,
     so the label has to darken to stay legible. */
  --bp-on-success: #FFFFFF;
}

/* The dark palette, defined once and applied by both selectors below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bp-street:   #0A0B14;
    --bp-surface:  #141524;
    --bp-surface-2:#1A1B2C;
    --bp-line:     #262844;
    --bp-ink:      #E8E9F2;
    --bp-ink-2:    #A6AAC4;
    --bp-ink-3:    #757A99;

    --bp-navy-50:  #1A1B2E;
    --bp-navy-100: #E4E5EA;  /* text on navy — stays light */
    --bp-navy-200: #C8C9D4;  /* text on navy — stays light */
    --bp-navy-300: #8A8DAE;
    --bp-navy-400: #A9ACC8;
    --bp-navy-500: #12131F;
    --bp-navy-600: #1C1E33;
    --bp-navy-700: #0E0F1A;
    --bp-navy-800: #0A0B14;
    --bp-navy-900: #06070E;

    --bp-orange-50:  #1E1209;
    --bp-orange-100: #2C1A10;
    --bp-orange-200: #3B2416;
    --bp-orange-300: #F6BC9A;
    --bp-orange-400: #F09762;
    --bp-orange-500: #EA6A1F;  /* button ground — brand value, no regression */
    --bp-orange-600: #F2803A;
    --bp-orange-700: #FFA773;

    --bp-success:    #5FCF95;
    --bp-success-bg: #10261C;
    --bp-warning:    #E5B65C;
    --bp-warning-bg: #2A2010;
    --bp-danger:     #F08A80;
    --bp-danger-bg:  #2C1614;
    --bp-info:       #7FA9F0;
    --bp-info-bg:    #141C2E;

    --bp-verified:    #A9ACC8;
    --bp-verified-bg: #232544;

    --bp-viz-1: #7C82C8;
    --bp-viz-2: #F2803A;
    --bp-viz-3: #A9ACC8;
    --bp-viz-4: #F6BC9A;
    --bp-viz-5: #5B5F86;
    --bp-viz-6: #3B2416;

    --bp-sh-1: 0 1px 2px rgba(0,0,0,.5);
    --bp-sh-2: 0 2px 8px rgba(0,0,0,.55);
    --bp-sh-3: 0 8px 24px rgba(0,0,0,.6);
    --bp-focus-ring: 0 0 0 3px rgba(242,128,58,.45);

    --bp-heading: #E8E9F2;
    --bp-on-success: #08150F;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bp-street:   #0A0B14;
  --bp-surface:  #141524;
  --bp-surface-2:#1A1B2C;
  --bp-line:     #262844;
  --bp-ink:      #E8E9F2;
  --bp-ink-2:    #A6AAC4;
  --bp-ink-3:    #757A99;

  --bp-navy-50:  #1A1B2E;
  --bp-navy-100: #E4E5EA;  /* text on navy — stays light */
  --bp-navy-200: #C8C9D4;  /* text on navy — stays light */
  --bp-navy-300: #8A8DAE;
  --bp-navy-400: #A9ACC8;
  --bp-navy-500: #12131F;
  --bp-navy-600: #1C1E33;
  --bp-navy-700: #0E0F1A;
  --bp-navy-800: #0A0B14;
  --bp-navy-900: #06070E;

  --bp-orange-50:  #1E1209;
  --bp-orange-100: #2C1A10;
  --bp-orange-200: #3B2416;
  --bp-orange-300: #F6BC9A;
  --bp-orange-400: #F09762;
  --bp-orange-500: #EA6A1F;  /* button ground — brand value, no regression */
  --bp-orange-600: #F2803A;
  --bp-orange-700: #FFA773;

  --bp-success:    #5FCF95;
  --bp-success-bg: #10261C;
  --bp-warning:    #E5B65C;
  --bp-warning-bg: #2A2010;
  --bp-danger:     #F08A80;
  --bp-danger-bg:  #2C1614;
  --bp-info:       #7FA9F0;
  --bp-info-bg:    #141C2E;

  --bp-verified:    #A9ACC8;
  --bp-verified-bg: #232544;

  --bp-viz-1: #7C82C8;
  --bp-viz-2: #F2803A;
  --bp-viz-3: #A9ACC8;
  --bp-viz-4: #F6BC9A;
  --bp-viz-5: #5B5F86;
  --bp-viz-6: #3B2416;

  --bp-sh-1: 0 1px 2px rgba(0,0,0,.5);
  --bp-sh-2: 0 2px 8px rgba(0,0,0,.55);
  --bp-sh-3: 0 8px 24px rgba(0,0,0,.6);
  --bp-focus-ring: 0 0 0 3px rgba(242,128,58,.45);

  --bp-heading: #E8E9F2;
  --bp-on-success: #08150F;
  color-scheme: dark;
}

/* Explicit light choice must beat the OS preference. */
:root[data-theme="light"] {
  --bp-surface: #FFFFFF;
  --bp-surface-2: #FAFAFC;
  color-scheme: light;
}

/* ---------------- theme toggle control (shared by all pages) ------------ */
.bp-themebtn {
  font: var(--bp-text-small);
  background: transparent;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-md);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--bp-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}
.bp-themebtn:hover { background: var(--bp-navy-50); color: var(--bp-ink); }
.bp-themebtn:focus-visible { outline: none; box-shadow: var(--bp-focus-ring); }
.bp-themebtn svg { width: 15px; height: 15px; display: block; }
/* Show the icon for the theme you would switch TO. */
.bp-themebtn .i-dark { display: block; }
.bp-themebtn .i-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-themebtn .i-dark { display: none; }
  :root:not([data-theme="light"]) .bp-themebtn .i-light { display: block; }
}
:root[data-theme="dark"] .bp-themebtn .i-dark { display: none; }
:root[data-theme="dark"] .bp-themebtn .i-light { display: block; }
:root[data-theme="light"] .bp-themebtn .i-dark { display: block; }
:root[data-theme="light"] .bp-themebtn .i-light { display: none; }

/* On a navy ground (landing header, login) the control needs light ink. */
.bp-themebtn--onnavy { color: var(--bp-navy-100); border-color: var(--bp-navy-400); }
.bp-themebtn--onnavy:hover { background: var(--bp-navy-600); color: var(--bp-white); }

/* A disabled button uses navy-100 as a GROUND in the light kit; that step is
   reserved for text on navy, so dark needs its own rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-btn:disabled {
    background: var(--bp-navy-600); color: var(--bp-ink-3);
  }
}
:root[data-theme="dark"] .bp-btn:disabled {
  background: var(--bp-navy-600); color: var(--bp-ink-3);
}