/* ──────────────────────────────────────────────────────────────────────────
   theme-dusk.css — Dusk theme (cool neutral grays).
   Activates on body[data-theme="dusk"]. Two-tier tokens per theme axis scope.

   Palette-level contrast fixes from S61 audit:
     • --text3 brightened (#48484a → #6e6e72) for readable helper text
     • --bg3 lifted off card-bg (#2c2c2e → #34343a) so drawers separate
   Component-level Dusk fixes (Add-SOL button bg, group-card inner line) are
   deferred to Phase D component CSS migration.
   ────────────────────────────────────────────────────────────────────────── */

body[data-theme="dusk"] {

  /* Browser-native widget color scheme (number-input spinners, scrollbars, autofill) */
  color-scheme: dark;

  /* ─────── TIER 1: PRIMITIVES ─────── */

  /* Neutral scale (light → dark) */
  --neutral-50:  #ebebf5;
  --neutral-100: #8e8e93;
  --neutral-200: #6e6e72;
  --neutral-300: #48484a;
  --neutral-400: #38383a;
  --neutral-500: #3a3a3c;
  --neutral-600: #34343a;
  --neutral-700: #2c2c2e;
  --neutral-800: #242426;
  --neutral-900: #1c1c1e;

  /* Brand & status (universal palette — S64 G-12 ratified) */
  --brand-base:     #09B040;
  --brand-emphasis: #F57D27;
  --success: #09B040;
  --warning: #F57D27;
  --danger:  #B01212;

  /* Per-strategy badge palette */
  --strategy-1: #2dc98a;
  --strategy-2: #6ba3f5;
  --strategy-3: #f57c2a;
  --strategy-4: #f06292;
  --strategy-5: #ffd23f;

  /* Cool blue accent */
  --accent-blue: #6ba3f5;

  /* ─────── TIER 2: SEMANTICS ─────── */

  /* Surfaces (drawer now visibly elevated above card) */
  --surface-base:     var(--neutral-900);  /* page background */
  --surface-raised:   var(--neutral-700);  /* cards */
  --surface-elevated: var(--neutral-600);  /* drawers — LIFTED off card */
  --surface-overlay:  var(--neutral-500);  /* highest layer */

  /* Borders */
  --border-subtle:   var(--neutral-400);
  --border-default:  var(--neutral-400);
  --border-emphasis: var(--neutral-300);

  /* Text (muted brightened for legibility) */
  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-100);
  --text-muted:     var(--neutral-200);
  --text-on-accent: var(--neutral-900);

  /* Accent */
  --accent:          var(--accent-blue);
  --accent-emphasis: var(--accent-blue);

  /* Status text */
  --text-success: var(--success);
  --text-warning: var(--warning);
  --text-danger:  var(--danger);

  /* Status background tints */
  --bg-success: rgba(9,176,64,0.15);
  --bg-warning: rgba(245,125,39,0.15);
  --bg-danger:  rgba(176,18,18,0.15);

  /* Form inputs */
  --input-bg:     var(--surface-elevated);
  --input-border: var(--border-emphasis);
  --input-text:   var(--text-primary);

  /* Action buttons */
  --button-primary-bg:   var(--brand-base);
  --button-primary-text: var(--neutral-900);
  --btn-add-bg:          transparent;   /* S66 operator-deferred fix (c) — transparent-fill on Dusk */

  /* Effects */
  --overlay: rgba(0,0,0,0.55);
  --shadow:  rgba(0,0,0,0.4);

  /* ─────── TRANSITIONAL ALIASES (component CSS migration pending Phase D) ─────── */

  --bg:      var(--neutral-900);
  --bg2:     var(--neutral-800);
  --bg3:     var(--neutral-600);   /* FIX: was #2c2c2e — collided with --card-bg */
  --bg4:     var(--neutral-500);
  --card-bg: var(--neutral-700);

  --border:  var(--neutral-400);
  --border2: var(--neutral-300);

  --text:  var(--neutral-50);
  --text2: var(--neutral-100);
  --text3: var(--neutral-200);     /* FIX: was #48484a — illegible helper text */
}

/* ──────────────────────────────────────────────────────────────────────────
   COMPONENT-LEVEL DUSK OVERRIDES (transitional — pending Phase D component
   migration). Source classes use hardcoded near-black colors authored for
   the Dark theme; on Dusk they read either too dim (sub-nav inactive text)
   or too stark (sc-cell + btn-danger near-black on grey card).
   ────────────────────────────────────────────────────────────────────────── */

/* Sub-nav inactive pills — white text instead of dim --text3 on grey pill */
body[data-theme="dusk"] .lp-btn { color: var(--text); }
body[data-theme="dusk"] .lp-btn:hover { color: var(--text); background: var(--bg4); }

/* Trade-card stat cells (ENTRY / AVG / CURRENT / etc.) — match Entry intel-row bg */
body[data-theme="dusk"] .sc-cell { background: var(--bg2); }

/* Action buttons in trade-card footer (Close %, Add SOL, + Add Limit Order) —
   match Entry intel-row bg per operator-direction. Hover lifts subtly. */
body[data-theme="dusk"] .btn-danger      { background: var(--bg2); border-color: var(--border2); }
body[data-theme="dusk"] .btn-danger:hover{ background: var(--bg3); border-color: var(--border2); }
body[data-theme="dusk"] .btn-add         { background: var(--bg2); }
body[data-theme="dusk"] .card-link-pill  { background: var(--bg2); }
body[data-theme="dusk"] .card-link-pill:hover { background: var(--bg3); }

/* Enter Trade + Save EDGE Settings buttons — match Add SOL / Close % bg */
body[data-theme="dusk"] .btn-primary       { background: var(--bg2); }
body[data-theme="dusk"] .btn-primary:hover { background: var(--bg3); }
body[data-theme="dusk"] .btn-action        { background: var(--bg2); }
body[data-theme="dusk"] .btn-action:hover  { background: var(--bg3); }

/* Theme picker buttons (Dark/Dusk/Retro Dark/Retro Light) — inline style uses
   var(--bg3); override with !important since inline style wins specificity. */
body[data-theme="dusk"] .theme-btn { background: var(--bg2) !important; }