/* The Masculine Forge · theme-steel.css
   "Steel Blue" alternate palette with brass-gold highlights. Load AFTER styles.css
   and set <html data-theme="steel">. Only accent colors change; layout is untouched.

   Roles:
   - Steel blue = action: buttons, CTAs, links, the "Let's reforge it." headline accent,
     step numbers, hero glow, FAQ +/-.
   - Brass gold = highlight: eyebrow and card labels, section rules, quote rule, diamond
     bullets, checkmarks, "Founding rate" badges, founding-spots note, focus ring,
     Reforged featured-card outline, a few sparks in the hero glow and logo.

   Contrast (WCAG 2.x, checked):
   - Button text #fff on every button gradient stop (normal and hover): 4.7:1 to 7.3:1 (AA needs 4.5:1)
   - Link text #5ea5ff on charcoal 7.2:1, on cards 6.3:1
   - Headline accent #3d8cf5 on charcoal 5.4:1
   - Gold text #d8b26a (eyebrow, card labels, badges): on charcoal 9.1:1, on cards 7.9:1,
     on the featured card's tinted top 7.2:1, inside the gold-tinted badge on the featured card 5.9:1
   - Gold focus ring #d8b26a: 7.9:1 to 9.3:1 against every background (non-text needs 3:1)
   - Gold marks (rules, diamonds, checks) use #e2c07f to #a8832f; the lit portion is 4.3:1+ on cards */

:root[data-theme="steel"] {
  --ember: #1e6fd9;            /* steel blue primary */
  --ember-hot: #5ea5ff;        /* lighter blue: links */
  --ember-deep: #0f4da8;
  --ember-rgb: 30, 111, 217;
  --ember-hot-rgb: 94, 165, 255;
  --ember-deep-rgb: 15, 77, 168;
  --ember-light: #9cc8ff;
  --ember-pale: #d6e8ff;
  --ember-text: #3d8cf5;
  --price-note: #d8b26a;       /* gold "Founding rate" badges */

  --btn-top: #2272dd;          /* kept dark enough that white text passes at every stop */
  --btn-mid: #1e6fd9;
  --btn-bot: #175ab5;
  --btn-text: #ffffff;
  --btn-border: #2f80ed;
  --btn-focus: #d8b26a;        /* brass focus ring, also on buttons */
  --outline-border: #2f80ed;

  /* brass gold highlight */
  --gold: #d8b26a;             /* text + focus ring */
  --gold-light: #e2c07f;       /* lit end of marks */
  --gold-deep: #a8832f;        /* shaded end of marks */
  --gold-rgb: 216, 178, 106;
}

/* focus ring */
[data-theme="steel"] :focus-visible { outline-color: var(--gold); }

/* buttons stay steel blue */
/* hover: background deepens slightly (keeps white text >= 5.6:1), highlight comes from the light-blue edge + glow */
[data-theme="steel"] .btn:hover {
  background: linear-gradient(180deg, #1e6fd9 0%, #1a64c8 55%, #1554aa 100%);
  border-color: #8ec2ff;
  box-shadow: 0 10px 26px -8px rgba(94, 165, 255, .7), 0 0 0 1px rgba(142, 194, 255, .35), inset 0 1px 0 rgba(255,255,255,.22);
}
[data-theme="steel"] .btn-outline:hover { background: rgba(30, 111, 217, .18); border-color: #8ec2ff; box-shadow: none; }
[data-theme="steel"] .faq summary::after { color: var(--ember-hot); }
[data-theme="steel"] .step-num { background: radial-gradient(circle at 35% 30%, #4f97f7, var(--ember) 55%, var(--ember-deep)); }

/* ---------- Gold highlights ---------- */
/* small eyebrow / card labels */
[data-theme="steel"] .eyebrow { color: var(--gold); border-left-color: var(--gold); }
[data-theme="steel"] .offer-tag { color: var(--gold) !important; }

/* section rules and dividers */
[data-theme="steel"] .section h2::after { background: linear-gradient(90deg, var(--gold-light), var(--gold-deep)); }
[data-theme="steel"] .forge-quote { border-left-color: var(--gold); }
[data-theme="steel"] .offer-featured .included li { border-bottom-color: rgba(var(--gold-rgb), .12); }

/* diamond bullets and checkmarks */
[data-theme="steel"] .check-list li::before {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 0 12px rgba(var(--gold-rgb), .35);
}
[data-theme="steel"] .included li::before { border-color: var(--gold); }

/* "Founding rate" price-note badges */
[data-theme="steel"] .price-note {
  display: inline-block; align-self: flex-start;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .10);
  border: 1px solid rgba(var(--gold-rgb), .5);
  letter-spacing: .01em;
}
[data-theme="steel"] .price + .price-note { margin-top: -4px; }

/* founding-spots note */
[data-theme="steel"] .early-note {
  background: rgba(var(--gold-rgb), .08);
  border-color: rgba(var(--gold-rgb), .45);
}
[data-theme="steel"] .early-note strong { color: var(--gold); }

/* Reforged featured card: gold outline, blue+gold glow */
[data-theme="steel"] .offer-featured {
  border-color: var(--gold);
  box-shadow: 0 18px 50px -24px rgba(var(--ember-rgb), .55), 0 0 0 1px rgba(var(--gold-rgb), .15), 0 0 36px -14px rgba(var(--gold-rgb), .35);
}

/* subtle gold sparks mixed into the blue glow */
[data-theme="steel"] .hero::before {
  background-image:
    radial-gradient(2px 2px at 12% 78%, var(--ember-light), transparent),
    radial-gradient(1.5px 1.5px at 22% 64%, var(--gold-light), transparent),
    radial-gradient(2px 2px at 71% 82%, var(--gold-light), transparent),
    radial-gradient(1.5px 1.5px at 80% 70%, var(--ember-hot), transparent),
    radial-gradient(1px 1px at 63% 58%, var(--ember-pale), transparent),
    radial-gradient(1.5px 1.5px at 38% 88%, var(--gold), transparent),
    radial-gradient(1px 1px at 90% 54%, #f3dfb4, transparent),
    radial-gradient(1px 1px at 6% 52%, var(--ember-pale), transparent),
    radial-gradient(1.5px 1.5px at 47% 76%, var(--gold-light), transparent),
    radial-gradient(ellipse 28% 14% at 50% 104%, rgba(var(--gold-rgb), .10), transparent 70%);
}
[data-theme="steel"] .brand-mark .spark-hot { fill: var(--gold); }