/* Sign-in and account pages in the approved Light theme (owner, 2026-10-08). The pages keep using the
   atm-brand components (.atm-panel, .atm-form, .atm-btn, .atm-note); in Light only the tokens change, using the
   same values as the staff app's Light theme (static/css/theme-brand.css): pale canvas, white card, true-black
   ink, gold buttons with dark text, dark focus ring. Dark (saved in this browser) keeps the brand dark look. */
:root[data-theme="light"] {
  color-scheme: light;
  --atm-bg:             #F1F2F4;
  --atm-surface:        #FFFFFF;
  --atm-raised:         #FFFFFF;
  --atm-divider:        #D5D9DF;
  --atm-divider-strong: #6B727C;
  --atm-text:           #000000;
  --atm-text-secondary: #1C1F24;
  --atm-text-quiet:     #393E46;
  --atm-accent:         #D9A514;   /* lines and underlines only — never text on white */
  --atm-btn-bg:         #FAD552;
  --atm-btn-text:       #0A0B0D;
  --atm-btn-border:     #D9A514;
  --atm-btn-hover:      #FDE88A;
  --atm-field-border:   #6B727C;
  --atm-focus:          #0A0B0D;
  --atm-danger:         #B42318;
  --atm-ok:             #067647;
  --atm-glow:           rgb(250 213 82 / 0.22);
  --bg-card-hover:      #F4F5F7;
  --border-light:       #E3E6EA;
}
/* Gold is never text on white: the eyebrow uses ink; the card gets a soft lift like the app's panels. */
:root[data-theme="light"] .atm-eyebrow { color: var(--atm-text-secondary); }
:root[data-theme="light"] .atm-panel { box-shadow: 0 1px 2px rgb(10 11 13 / 0.06), 0 8px 24px rgb(10 11 13 / 0.06); }
:root[data-theme="light"] .atm-form .atm-input:focus,
:root[data-theme="light"] .atm-form .atm-input:focus-visible { border-color: var(--atm-text); }
/* The approved wordmark is gold + white (made for dark): in Light it sits on the app's dark brand strip,
   like the dark menu beside the light page. The image itself is unchanged. */
:root[data-theme="light"] :is(img[src*="wordmark-bright-gold"], img[src*="wordmark-gold-white"]) {
  box-sizing: content-box;
  background: #0A0B0D;
  padding: 14px 20px;
  border-radius: 8px;
}
/* The /lp header wordmark is small: a slimmer strip. */
:root[data-theme="light"] .atm-lp__brand img, :root[data-theme="light"] header img[src*="wordmark-gold-white"] { padding: 8px 12px; border-radius: 6px;
}
@media (max-width: 600px) {
  /* Phone: the card is the page (login.html) — keep a white page so fields stand out on the canvas. */
  :root[data-theme="light"] .atm-login__card { background: var(--atm-surface); border-radius: 0; }
}