/* TASK-2026-LEGUSLT-BRAND — Legus Texology dark "Petrol Teal" theme. Owner palette 2026-06-11.
   SCOPE (deliberate): the ENTRY CHROME (login + index/navigator — pages that load app.t9c.css)
   and the brand accents. It retones ONLY the app.t9c.css surface vars (--bg/--card-bg/--text/
   --text-soft/--border) which the household capture form does NOT use, so dark text can't leak
   onto the form's still-light Tailwind cards (which would be invisible). --brand-text and a
   DARK --brand-primary (petrol) are kept so the form's text-on-light stays readable. The
   dashboard island gets petrol/cyan separately via brand_for() in apps-build-pwas.sh.
   A full dark household form is a separate, deliberate pass. */
:root {
  /* ── Raw palette ── */
  --c-petrol:      #1C5C63;  /* primary brand — mid background tone */
  --c-petrol-dark: #0E2F34;  /* page base / login background */
  --c-cyan:        #4FD1D9;  /* accent / glow — rings, headline, focus */
  --c-aqua:        #7FE9EC;  /* bright — hover / active */
  --c-pale-cyan:   #A7E4E8;  /* light text on dark */
  --c-ice:         #EAF6F6;  /* near-white — headings / inputs */
  --c-slate-teal:  #6F979B;  /* muted — subtitle / placeholder */
  --c-surface:     #13434A;  /* lifted card surface */
  --c-line:        #2A6B72;  /* border / divider */
  --c-success:     #3FBF8F;
  --c-warning:     #E0B341;
  --c-error:       #E5654F;

  /* ── Owner drop-in vocabulary ── */
  --bg-base:        var(--c-petrol-dark);
  --bg-gradient:    linear-gradient(135deg, #0E2F34 0%, #1C5C63 60%, #1B5E4D 100%);  /* darker green end (was #2A7F87) — TASK-2026-LEGUS login tone */
  --surface:        var(--c-surface);
  --accent:         var(--c-cyan);
  --accent-hover:   var(--c-aqua);
  --focus-ring:     var(--c-cyan);
  --text-primary:   var(--c-ice);
  --text-secondary: var(--c-pale-cyan);
  --text-muted:     var(--c-slate-teal);
  --success:        var(--c-success);
  --warning:        var(--c-warning);
  --error:          var(--c-error);

  /* ── Platform app.t9c.css surface vars -> dark (entry chrome only) ── */
  --bg:        var(--c-petrol-dark);
  --card-bg:   var(--c-surface);
  --text:      var(--c-ice);
  --text-soft: var(--c-pale-cyan);
  --border:    var(--c-line);

  /* ── Brand ── primary stays PETROL (dark) so the form's text-on-light is readable; entry
     accents that sit on the dark canvas are switched to cyan via the class rules below. ── */
  --brand-primary:   var(--c-petrol);
  --brand-secondary: var(--c-cyan);
  --brand-bg-soft:   var(--c-surface);
  --brand-surface:   var(--c-surface);
  --brand-muted:     var(--c-slate-teal);
  /* --brand-text intentionally NOT overridden (household form relies on it). */

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Dark canvas for the entry chrome (app.t9c.css pages). */
body { background: var(--bg-gradient) fixed; color: var(--text); }

/* Accents on the dark canvas -> cyan (petrol would vanish on dark). */
.btn-primary, .btn.primary { background: var(--accent); color: var(--c-petrol-dark); }
.btn-primary:hover, .btn.primary:hover { background: var(--accent-hover); color: var(--c-petrol-dark); }
.btn-outline { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent); color: var(--c-petrol-dark); }
.card { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.chip { background: rgba(79, 209, 217, .14); color: var(--accent); }
.text-brand { color: var(--accent); }
.text-accent { color: var(--accent-hover); }
.accent-rule { background: var(--accent); }
.hero-bg { background: var(--bg-gradient); color: var(--text); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Force the login card + inputs dark — login.t9c.html hardcodes #fff in an inline <style>
   that loads after this file, so !important is needed to retone it. */
.login-card { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.login-card h1, .login-card h2 { color: var(--text) !important; }
.login-card input { background: var(--c-petrol-dark) !important; color: var(--text) !important; border-color: var(--border) !important; }
.login-card input::placeholder { color: var(--text-muted) !important; }
.login-card button { background: var(--accent) !important; color: var(--c-petrol-dark) !important; }
.login-card button:disabled { background: var(--c-slate-teal) !important; color: var(--c-pale-cyan) !important; }