/* ==========================================================================
   NEXIFY STUDIO: the light theme on the staff pages (sign-in and dashboard).
   Same system as the website: html[data-theme] from the page head, LIGHT unless
   the visitor chose dark on the website's switch (localStorage 'nx:theme'), so
   the staff area opens in whichever theme was chosen and follows a change made
   in another tab. Loaded after css/staff-gold.css.
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --c-fg: #17130d;
  --c-surface: #fffdf8;
  --bg: #f5f0e7;
  --bg-2: #ede6d8;
  --panel: #fffdf8;
  --white: #17130d;
  --offwhite: #2a241b;
  --grey: #433b30;
  --grey-2: #7d5a1f;
  --grey-dim: #6b6153;
  --err: #a1402a;
  --gold-1: #7a561c;
  --gold-2: #a87a2e;
  --gold-3: #8c6322;
  --gold-4: #6b4a17;
  --gold-5: #4a3210;
  --gold-ink: #7d5a1f;
  --gold-text: linear-gradient(180deg, #b0803a 0%, #94692a 30%, #7a5420 58%, #5f4116 80%, #8f672c 100%);
  --gold-text-hi: linear-gradient(180deg, #c18f43 0%, #a37633 30%, #86602a 58%, #6b4b1c 80%, #9c7234 100%);
  --gold-line: rgba(122, 88, 32, 0.2);
  --gold-line-strong: rgba(122, 88, 32, 0.38);
  --gold-tint: rgba(184, 137, 60, 0.11);
  --gold-light: rgba(214, 170, 90, 0.16);
  --line: var(--gold-line);
  --line-strong: var(--gold-line-strong);
}
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"] { color-scheme: light; }

/* ---- text that was white -------------------------------------------------------- */
html[data-theme="light"] :is(.brand, .icon-btn, .side__user, .status--pending, .t-bold, .topbar__menu) { color: var(--c-fg); }
html[data-theme="light"] .imgs__item .icon-btn { color: #fff; }        /* on a photo */
html[data-theme="light"] code { background: rgba(122, 88, 32, 0.08); }

/* ---- fields and controls --------------------------------------------------------- */
html[data-theme="light"] :is(.field input, .field textarea, .field select, .mini input, .mini select) { background-color: #fffefb; color: var(--c-fg); }
html[data-theme="light"] :is(.field input, .field textarea, .mini input)::placeholder { color: rgba(67, 59, 48, 0.55); }
html[data-theme="light"] :is(.field select option, .mini select option, .status-select option) { background: #fffdf8; color: var(--c-fg); }
html[data-theme="light"] .toggle__ui { background: rgba(122, 88, 32, 0.08); }
html[data-theme="light"] .toggle__ui::after { background: #958771; }   /* off: a knob that shows on the pale track */
html[data-theme="light"] .table th { color: var(--gold-ink); }

/* ---- sign-in: the shop photo, washed to daylight ------------------------------------ */
html[data-theme="light"] .auth::before {
  background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(245, 240, 231, 0.5), rgba(245, 240, 231, 0.9) 70%);
}
html[data-theme="light"] .auth__giant {
  background-image: var(--gold-brush), radial-gradient(ellipse 60% 90% at 50% 0%, #d8c294, #b39461 70%);
  opacity: 0.55;
}
html[data-theme="light"] .auth__card {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(214, 170, 90, 0.12), transparent 70%), linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(250, 245, 236, 0.95));
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px -30px rgba(60, 40, 10, 0.35);
}

/* ---- dashboard -------------------------------------------------------------------------- */
html[data-theme="light"] .preview-bar { background: #efe7d8; }
html[data-theme="light"] .drawer__backdrop { background: rgba(40, 30, 15, 0.35); }
html[data-theme="light"] .drawer__panel {
  background: linear-gradient(180deg, rgba(214, 170, 90, 0.08), transparent 30%), #fbf7ef;
  box-shadow: -30px 0 80px rgba(60, 40, 10, 0.25);
}
html[data-theme="light"] .side-open .side { box-shadow: 30px 0 80px rgba(60, 40, 10, 0.25); }
html[data-theme="light"] .toast.is-bad { background: #f6e1da; color: var(--c-fg); border-color: rgba(161, 64, 42, 0.35); }

/* ---- light is the default (2026-11-14): the remaining surfaces ---------------------------- */
/* fields on paper: a gold hairline at about 3:1, a faint inner shade, a soft gold ring on
   focus (the field drops its outline) */
html[data-theme="light"] :is(.field input:not([type="checkbox"], [type="radio"]), .field textarea, .field select, .mini input, .mini select) {
  border-color: rgba(122, 88, 32, 0.7);
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.07);
}
html[data-theme="light"] :is(.field input:not([type="checkbox"], [type="radio"]), .field textarea, .field select, .mini input, .mini select):focus {
  border-color: var(--gold-3);
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.07), 0 0 0 3px rgba(184, 137, 60, 0.2);
}
/* cards, figures and tiles: lifted off the paper by a soft warm shadow */
html[data-theme="light"] :is(.card, .kpi, .tile) {
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 40, 10, 0.05), 0 14px 30px -24px rgba(60, 40, 10, 0.4);
}
/* the label on a photo tile keeps the dark chip, so its text stays light */
html[data-theme="light"] .tile__flag { color: #f3eee4; }
/* the off switch's track edge (its knob: above) */
html[data-theme="light"] .toggle__ui { border-color: rgba(122, 88, 32, 0.45); }
/* danger, messages: the red taken deeper for paper */
html[data-theme="light"] .btn-pill--danger { border-color: rgba(161, 64, 42, 0.5); }
html[data-theme="light"] .btn-pill--danger:hover { border-color: var(--err); background: rgba(161, 64, 42, 0.07); }
html[data-theme="light"] .auth__msg { border-color: rgba(161, 64, 42, 0.35); background: rgba(161, 64, 42, 0.05); }
/* warm shadows instead of the dark stage's black ones */
html[data-theme="light"] .btn-pill--light { box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.8), inset 0 -1px 0 rgba(90, 58, 16, 0.25), 0 10px 22px -14px rgba(90, 58, 16, 0.55); }
html[data-theme="light"] .toast { box-shadow: 0 16px 40px -14px rgba(60, 40, 10, 0.4); }
/* placeholders keep their dashed underline visible on paper */
html[data-theme="light"] .ph { border-bottom-color: rgba(122, 88, 32, 0.42); }