/* Scott Plastics global light/dark theme tokens.
   Loaded BEFORE other stylesheets via brand.theme_css so any utility/inline CSS
   that references --bg, --card-bg, etc. resolves at parse time.

   Canonical vocabulary matches SR-2's theme.css (recycling/static/recycling/css/theme.css)
   so scott_common's shell.css renders content-area surfaces with consistent
   light/dark vars across the fleet:
     --bg              body surface
     --card-bg         card / panel surface
     --card-border     card border
     --card-shadow     card box-shadow
     --text            primary text
     --text-muted      muted/secondary text
     --text-soft       softer body text
     --input-bg / --input-border / --input-text / --input-placeholder / --input-focus
     --nav-bg / --nav-text    persistent nav strip (kept legible in both themes)

   Without this stylesheet present, the unified shell sidebar/header still
   render (they use --card-2/--border-2 which scott_common's shell.css defines)
   but the content body stays white because --bg / --text are undefined —
   producing the partial dark-mode bug Dan saw on 2026-05-27.
*/

:root {
  /* Plastics brand color + spacing tokens referenced by the tablet/clock UI
     (timeclock/static/timeclock/css/*) and other plastics-specific templates.
     Without these, /clock/ rendered as a black screen because brand-color
     text and warning chips had no value to resolve. Backported from Server A
     2026-05-27. */
  --scott-plastics: #0E7C8E;
  --scott-plastics-light: #5FB4C5;
  --scott-plastics-dark: #095866;
  --scott-warning: #d97706;
  --scott-radius-md: 0.5rem;
  --scott-space-2: 0.5rem;
  --scott-space-6: 1.5rem;
  --scott-space-8: 2rem;
  --scott-text-4xl: 2.25rem;

  /* Surfaces */
  --bg:          #f1f5f9;  /* slate-100 — body background */
  --card-bg:     #ffffff;
  --card-border: #e2e8f0;  /* slate-200 */
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 6px -2px rgba(0,0,0,.04);

  /* Text */
  --text:        #0f172a;  /* slate-900 */
  --text-muted:  #64748b;  /* slate-500 */
  --text-soft:   #334155;  /* slate-700 */

  /* Inputs */
  --input-bg:        #ffffff;
  --input-border:    #cbd5e1;
  --input-text:      #0f172a;
  --input-placeholder: #94a3b8;
  --input-focus:     #93c5fd;

  /* Sidebar / nav strip (kept legible in both themes) */
  --nav-bg:    #0E7C8E;  /* Plastics teal */
  --nav-text:  #f1f5f9;
}

[data-theme="dark"] {
  --bg:          #0f172a;  /* slate-900 */
  --card-bg:     #1e293b;  /* slate-800 */
  --card-border: #334155;  /* slate-700 */
  --card-shadow: 0 1px 3px rgba(0,0,0,.30), 0 4px 6px -2px rgba(0,0,0,.20);

  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --text-soft:   #cbd5e1;

  --input-bg:        #0f172a;
  --input-border:    #334155;
  --input-text:      #f1f5f9;
  --input-placeholder: #64748b;
  --input-focus:     #3b82f6;
}

/* Bootstrap surface overrides — make .card / .table / .modal pick up the theme
   vars so plastics content that uses raw Bootstrap classes flips with dark mode
   instead of staying hardcoded-white. */
.card,
.modal-content,
.list-group-item,
.dropdown-menu {
  background-color: var(--card-bg);
  color: var(--text);
  border-color: var(--card-border);
}
.table {
  color: var(--text);
}
.table > :not(caption) > * > * {
  background-color: var(--card-bg);
  color: var(--text);
  border-bottom-color: var(--card-border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: color-mix(in srgb, var(--card-bg) 92%, var(--text) 8%);
  color: var(--text);
}
.form-control,
.form-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}
.form-control::placeholder {
  color: var(--input-placeholder);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-focus);
}
hr {
  color: var(--card-border);
  border-color: var(--card-border);
}