/* Signed-out screens (splash, sign-in, sign-up, check-email, set-password, pending) in the
   partfive.app marketing style: cockpit-dark navy, one EFB-blue accent, Inter throughout.
   Scoped by screen id so nothing inside the signed-in app changes. Dark in both app themes,
   because these screens are the continuation of the marketing site, which is dark only.
   Several screens carry inline colours, so the overrides below need !important. */

:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) {
  --pf-bg: #070D18;
  --pf-s1: #0B1322;
  --pf-s2: #101A2C;
  --pf-line: #18243A;
  --pf-line2: #243353;
  --pf-tx: #E6ECF5;
  --pf-tx2: #9AA9C0;
  --pf-tx3: #71829C;
  --pf-blue: #2F7BF6;
  --pf-blue-hover: #1F6AE6;
  --pf-blue2: #5B9BFF;
  --pf-blue-tint: #12213C;

  /* re-point the app's own tokens for everything inside these screens */
  --card-bg: var(--pf-s1);
  --card-border: var(--pf-line);
  --input-bg: var(--pf-bg);
  --input-border: var(--pf-line2);
  --input-border-focus: var(--pf-blue);
  --input-text: var(--pf-tx);
  --input-placeholder: var(--pf-tx3);
  --text-primary: var(--pf-tx);
  --text-secondary: var(--pf-tx2);
  --text-muted: var(--pf-tx3);
  --bg-elevated: var(--pf-blue-tint);
  --accent-primary: var(--pf-blue);
  --accent-primary-subtle: rgba(47, 123, 246, 0.12);
  --btn-primary-bg: var(--pf-blue);
  --btn-primary-hover: var(--pf-blue-hover);
  --btn-primary-text: #fff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--pf-line2);
  --btn-secondary-text: var(--pf-tx);
  --btn-secondary-hover-bg: var(--pf-s2);
  --border-default: var(--pf-line);
  --border-strong: var(--pf-tx3);

  background: var(--pf-bg) !important;
  color: var(--pf-tx);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* The page behind an active signed-out screen */
html:has(:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login).active),
html:has(:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login).active) :is(body, .app, #main-panel, #content-area) {
  background: #070D18 !important;
}

/* One typeface: Inter everywhere (headings used Space Grotesk, fields and buttons DM Sans) */
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(div, span, p, label, a, button, input, select, textarea, h1, h2, h3) {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.005em;
}

/* Surfaces that were hard-coded slate */
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) [style*="background:#1E293B"] {
  background: var(--pf-blue-tint) !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) [style*="background:var(--card-bg)"] {
  background: var(--pf-s1) !important;
  border-color: var(--pf-line) !important;
}
#screen-splash [data-lucide] { color: var(--pf-blue2) !important; }
#screen-splash [style*="color:#CBD5E1"] { color: var(--pf-tx) !important; font-size: 14px !important; }

/* Fields */
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: var(--pf-bg) !important;
  border: 1px solid var(--pf-line2) !important;
  border-radius: 10px !important;
  color: var(--pf-tx) !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(input, select, textarea):focus {
  border-color: var(--pf-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 123, 246, 0.18) !important;
  outline: none !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(input, textarea)::placeholder { color: var(--pf-tx3) !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) input[type=checkbox] { accent-color: var(--pf-blue); }

/* Buttons: one blue primary, quiet outline secondary (the sign-in button was amber, the
   splash button indigo) */
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(.btn-primary, #login-submit-btn) {
  background: var(--pf-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  min-height: 46px;
  font-size: 15px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(.btn-primary, #login-submit-btn):hover { background: var(--pf-blue-hover) !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is(.btn-primary, #login-submit-btn):disabled {
  background: var(--pf-blue-tint) !important;
  color: var(--pf-tx3) !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--pf-line2) !important;
  color: var(--pf-tx) !important;
  border-radius: 10px !important;
  min-height: 46px;
  font-size: 15px !important;
  font-weight: 600 !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .btn-secondary:hover { border-color: var(--pf-tx3) !important; background: var(--pf-s2) !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .oauth-btn { border-radius: 10px !important; min-height: 46px; font-weight: 600 !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .oauth-btn--apple { border-color: var(--pf-line2) !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .oauth-divider { color: var(--pf-tx3) !important; }
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .oauth-divider::before,
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) .oauth-divider::after { background: var(--pf-line) !important; }

/* Accent text that was amber or indigo (Create account, Forgot password, icon tints) */
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) :is([style*="color:#d97706"], [style*="color:#D97706"], [style*="color:#6366F1"],
    [style*="color:#818CF8"], [style*="color:var(--accent-primary)"], #forgot-pw-link) {
  color: var(--pf-blue2) !important;
}
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) [style*="background:#6366F1"],
:is(#screen-splash, #screen-choose-path, #screen-join-org, #screen-create-account,
    #screen-cfi-pending, #screen-cfi-rejected, #screen-pending, #screen-create-org,
    #screen-create-cfi, #screen-org-ready, #screen-check-email, #screen-set-password,
    #screen-login) [style*="background:#d97706"] {
  background: var(--pf-blue) !important;
  color: #fff !important;
}

/* Path picker */
#screen-choose-path .path-card { background: var(--pf-s1); border-color: var(--pf-line2); }
#screen-choose-path .path-card.selected { background: rgba(47, 123, 246, 0.10); border-color: var(--pf-blue); }
#screen-choose-path .path-icon { background: var(--pf-blue-tint) !important; }
#screen-choose-path .path-icon [data-lucide] { color: var(--pf-blue2) !important; }
#screen-choose-path .path-title { font-weight: 600; }

/* Demo access chips under the sign-in card */
#screen-login button[onclick^="loginAs"] {
  background: var(--pf-s1) !important;
  border: 1px solid var(--pf-line2) !important;
  color: var(--pf-tx2) !important;
  border-radius: 8px !important;
}
#screen-login button[onclick^="loginAs"]:hover { border-color: var(--pf-blue) !important; color: var(--pf-tx) !important; }
#screen-login [style*="color:#475569"], #screen-splash [style*="color:#475569"] { color: var(--pf-tx3) !important; }