/* Your edits live here. The AI editor writes this file; it is loaded after the theme, so it wins, and it survives every rebuild. */

/* ---- Dark theme ---- */
:root {
  --ink:      #ECEDEF;   /* now the light text colour */
  --paper:    #101215;
  --panel:    #191C21;
  --rule:     #2C3038;
  --mute:     #9AA0A9;
  --chipbg:   #2A2410;
  --success:  #6BD3A0;
  --shadow:   0 1px 0 rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
}

html { background: var(--paper); color-scheme: dark; }
body { background: var(--paper); color: var(--ink); }

/* Surfaces that were hard-coded white in the theme */
.card,
.panel, .box, .note, .tile, .cell,
aside, form, fieldset { background: var(--panel); }

header { background: var(--paper); }
footer { background: var(--panel); }

/* The announcement bar used the text colour as its background */
.announce { background: #05070A; color: var(--ink); }

/* Text tints that were baked as near-black alpha */
.lede { color: rgba(236,237,239,0.72); }
.card:hover { border-color: rgba(236,237,239,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55); }

/* Accent stays, warmed slightly so it holds up on a dark field */
a:hover, .pos-src a:hover { color: #F58265; }
.cta { color: #14161A; }
.cta:hover { color: #14161A; }
.cta[disabled], .cta.is-disabled { background: #23272E; color: var(--mute); }

.save { color: #1A1A1A; }
th { background: #14171C; color: var(--mute); }
tr:hover td { background: rgba(255,255,255,0.02); }

/* Form controls */
input, select, textarea {
  background: #14171C; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--mute); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Product photos are cut out on white — keep their plate light so they read */
.hero-media img, .hero img, .card img { background: #FFFFFF; }

::selection { background: var(--accent); color: #14161A; }