/* ═══════════════════════════════════════════════════════════════
   theme-light.css — LIGHT THEME OVERRIDE for data-entry surfaces
   Include AFTER shared/styles.css:
     <link rel="stylesheet" href="../shared/styles.css">
     <link rel="stylesheet" href="../shared/theme-light.css">

   Why: factories do hours of form entry, often on low-end monitors
   in bright rooms — light background reads better (2026-07-03).
   Marketing/landing keeps the dark+gold brand look.

   All values chosen for WCAG AA on light surfaces:
     --ink  #241f1a on #fff  ≈ 15.9:1
     --ink2 #4c453d on #fff  ≈  9.3:1
     --ink3 #6e655a on #fff  ≈  5.7:1  (AA normal text ✓)
     --gold #8a6820 on #fff  ≈  5.1:1  (AA ✓ — use this as accent TEXT;
                                        decorative gold stays via --gold-pale)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg:        #f6f4ef;
  --surface:   #ffffff;
  --surface2:  #f4f1ea;
  --surface3:  #ece8dd;
  --surface4:  #e2dccd;
  --surface5:  #d6cfbe;
  --border:    #e5dfd2;
  --border2:   #cfc3a4;
  --border3:   rgba(0,0,0,0.08);

  /* Gold: darker ramp so text-gold passes AA on white */
  --gold:      #8a6820;
  --gold-d:    #6b4f1a;
  --gold-l:    #a8842f;
  --gold-pale: #c9a84c;
  --gold-glow: rgba(138,104,32,0.08);
  --gold-glow2:rgba(138,104,32,0.16);
  --gold-grad: linear-gradient(135deg,#8a6820 0%,#a8842f 45%,#c9a84c 75%,#a8842f 100%);
  --gold-text: linear-gradient(135deg,#6b4f1a 0%,#8a6820 45%,#a8842f 70%,#8a6820 100%);

  /* Ink scale — dark text on light surfaces */
  --ink:       #241f1a;
  --ink2:      #4c453d;
  --ink3:      #6e655a;
  --ink4:      #b3aa9c;

  /* Status colors darkened for light backgrounds */
  --green:     #1a7a52;
  --green-l:   rgba(26,122,82,0.10);
  --green-d:   #135e3f;
  --green-m:   #1f9465;
  --amber:     #9c5f06;
  --amber-l:   rgba(156,95,6,0.10);
  --amber-d:   #7d4c05;
  --red:       #c22f2f;
  --red-l:     rgba(194,47,47,0.08);
  --blue:      #2a63b0;
  --blue-l:    rgba(42,99,176,0.08);
  --purple:    #6647ad;
  --purple-l:  rgba(102,71,173,0.08);
  --teal:      #1e8078;
  --teal-l:    rgba(30,128,120,0.08);
}

/* ── Component touch-ups (dark-theme assumptions) ── */

/* Soft warm page background instead of pitch black */
body { background: var(--bg); color: var(--ink); }

/* Shadows: black glows are too harsh on light */
.card, .modal-sheet, .sticky-foot {
  box-shadow: 0 1px 3px rgba(36,31,26,0.06), 0 8px 24px rgba(36,31,26,0.05);
}

/* Top nav + sidebar: solid light surfaces with crisp border */
.top-nav, .sidebar { background: var(--surface); }
.top-nav { border-bottom: 1px solid var(--border); }

/* Inputs: white field on warm surface reads best */
input, select, textarea {
  background: #fff;
  color: var(--ink);
  border-color: var(--border2);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: var(--ink4); }
input[readonly] { background: var(--surface2); color: var(--ink2); }

/* Primary button: keep gold identity, ensure dark readable label */
.btn-primary { color: #241f1a; }

/* Bottom nav (mobile) */
.bottom-nav { background: var(--surface); border-top: 1px solid var(--border); }

/* Chips/badges that used translucent white borders */
.sb-count, .badge { border-color: var(--border2); }

/* Autosave/status text often uses ink3 — already AA via token */

/* Scrollbar (webkit) — subtle on light */
::-webkit-scrollbar-thumb { background: #cfc7b8; }
::-webkit-scrollbar-track { background: transparent; }