/* Wild Construct always-use kit (v0 spike) — L07 /account boot habit.
 *
 * Source of intent: Notion "WC always-use kit (agent defaults)".
 * Companion writeup: docs/wc-always-use-kit.md
 *
 * Scope of this file (deliberately small):
 *   1. Document the locked color spine (dark + light) as CSS custom properties.
 *   2. Offer two named primitive aliases (.wc-btn, .wc-field) so new Operate
 *      markup can reach for a single dialect without inventing a third.
 *
 * Not in this spike: restyling account pages, unifying Release Desk dialects,
 * dialog/toast/shell extraction, or flipping account to light mode.
 *
 * Load AFTER /assets/wc.css on Operate surfaces that opt in (today: /account/*).
 */

/* --- Token spine ---------------------------------------------------------- */

/*
 * Dark (shipped today on the site): black / gold / white(paper).
 * Light (locked, not yet applied): white / navy / gold.
 *
 * Marketing pages stay dark-only via wc.css :root. Light tokens live here so
 * L07 can opt in later with html[data-theme="light"] without inventing a
 * second gold/void ramp.
 */
:root {
  --wc-void: #000000;
  --wc-navy: #0b1c33;
  --wc-paper: #f4f2ed;
  --wc-paper-soft: #c8c3bb;
  --wc-mute: #918c84;
  --wc-gold: #e6a23c;
  --wc-gold-hot: #ffc153;
  --wc-line: #29251f;
  --wc-line-gold: rgba(230, 162, 60, .42);
  --wc-ink-on-gold: #160e03;
  --wc-gold-btn-hi: #f0c556;
  --wc-gold-btn-dk: #b98c24;
  --wc-input-fill: #0b0a08;
  --wc-input-line: #6b6258;
  --wc-radius-control: .28rem;
}

/*
 * Opt-in light remap. Nothing sets data-theme="light" yet — this is the
 * contract, not a visual flip. When L07 light mode lands, set the attribute
 * on <html> (or a surface root) and prefer var(--wc-*) / the remapped aliases
 * below rather than hard-coding white/navy hexes.
 */
html[data-theme="light"] {
  color-scheme: light;
  --wc-void: #ffffff;
  --wc-paper: #0b1c33;
  --wc-paper-soft: #1a3352;
  --wc-mute: #5a6b82;
  --wc-line: #d8dde6;
  --wc-line-gold: rgba(230, 162, 60, .55);
  --wc-input-fill: #f7f8fb;
  --wc-input-line: #9aa6b8;
  /* gold / gold-hot / gold-btn* / ink-on-gold stay; navy is the light ground */
  --void: var(--wc-void);
  --paper: var(--wc-paper);
  --paper-soft: var(--wc-paper-soft);
  --mute: var(--wc-mute);
  --line: var(--wc-line);
  --line-gold: var(--wc-line-gold);
  --input-fill: var(--wc-input-fill);
  --input-line: var(--wc-input-line);
  background: var(--wc-void);
  color: var(--wc-paper);
}

/* --- Primitive aliases (boot habit) --------------------------------------- */

/*
 * Prefer these names on new Operate markup. They deliberately share rules with
 * the marketing synonyms so one visual dialect stays — the rename is for
 * agents/humans, not a second look.
 *
 * Today account still uses .button / .field. Migration is additive: add
 * .wc-btn or .wc-field alongside, then drop the old class when ready.
 */
.wc-btn,
.button.wc-btn {
  /* Identity: primary filled control. Visuals come from .button in wc.css
     when both classes are present; standalone .wc-btn mirrors the contract. */
  display: inline-flex;
  min-height: 3.15rem;
  min-width: 12rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold, var(--wc-gold));
  border-radius: 6px;
  padding: .8rem 2.6rem;
  background: linear-gradient(
    180deg,
    var(--gold-btn-hi, var(--wc-gold-btn-hi)),
    var(--gold-btn-dk, var(--wc-gold-btn-dk))
  );
  color: var(--ink-on-gold, var(--wc-ink-on-gold));
  font-family: var(--font-display, "agency-fb", "Arial Narrow", sans-serif);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.wc-btn:hover,
.button.wc-btn:hover {
  background: linear-gradient(
    180deg,
    var(--gold-hot, var(--wc-gold-hot)),
    var(--gold-btn-hi, var(--wc-gold-btn-hi))
  );
  border-color: var(--gold-hot, var(--wc-gold-hot));
  color: var(--ink-on-gold, var(--wc-ink-on-gold));
  transform: translateY(-2px);
}

.wc-btn:active,
.button.wc-btn:active { transform: none; }

.wc-btn[disabled],
.button.wc-btn[disabled] {
  background: #765529;
  border-color: #765529;
  color: #17100a;
  cursor: not-allowed;
  transform: none;
}

.wc-field,
.field.wc-field {
  display: block;
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--input-line, var(--wc-input-line));
  border-radius: var(--radius-control, var(--wc-radius-control));
  padding: .78rem .9rem;
  background: var(--input-fill, var(--wc-input-fill));
  color: var(--paper, var(--wc-paper));
  caret-color: var(--gold-hot, var(--wc-gold-hot));
  font-family: var(--font-body, "Open Sans", Arial, Helvetica, sans-serif);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.wc-field::placeholder,
.field.wc-field::placeholder { color: #8f887d; }

.wc-field:hover,
.field.wc-field:hover { border-color: #8c7e6c; }

.wc-field:focus,
.field.wc-field:focus {
  border-color: var(--gold, var(--wc-gold));
  background: #0e0c09;
  outline: 2px solid rgba(230, 162, 60, .3);
  outline-offset: 2px;
}

.wc-field[aria-invalid="true"],
.field.wc-field[aria-invalid="true"] {
  border-color: var(--gold-hot, var(--wc-gold-hot));
}