/* stt — StocksToTrade, dark-first
   Load after forms.css, then select it with data-sttf-skin="stt"
   (or make it the page default: window.STT_FORMS_SKIN = "stt").

   Dark is the default, so existing embeds don't change. Light mode:
     data-sttf-theme="light"   always light
     data-sttf-theme="auto"    follow the visitor's system setting

   Brand-given (pulled from stockstotrade.com): accent #4383ff, card #121a2b,
   ground #090d18, ink #eef2f8, line-2 #31415e, radius 12px, DM Sans; light
   accent #1a56b8 (the brand blue is 3.54:1 on white). Everything else is
   derived, and every text pair is checked at WCAG AA — which is why this skin
   sets more than six values: explicit hex can be verified, a derived mix can't.

   Why a separate fill: white on #4383ff is 3.54:1, below AA for 15px button
   text. Filled controls use #2b67e8 (4.99:1); the brand blue stays the
   identity colour for the progress bar, focus rings, the today dot and glows.

   Call-to-action buttons (Next, Confirm, the sticky bar, calendar links) are
   the stockstotrade.com CTA yellow #f5c865 with near-black text (11.8:1) in
   both themes. Selected days and times stay blue — yellow means "go". */

.sttf[data-sttf-skin="stt"] {
  --sttf-surface:       #121a2b;
  --sttf-surface-2:     #1e2536;

  --sttf-ink:           #eef2f8;   /* 15.47 on surface */
  --sttf-ink-2:         #a8adb6;   /*  7.71 */
  --sttf-ink-3:         #8b93a3;   /*  5.63 — was #757b87 at 4.09, which failed */

  --sttf-line:          #232f47;
  --sttf-line-2:        #31415e;
  --sttf-field-line:    #5b6f93;   /*  3.43 — input boundaries, WCAG 1.4.11 */

  --sttf-accent:        #4383ff;   /* bar, focus ring, today dot, glow */
  --sttf-accent-text:   #6f9eff;   /*  6.63 — accent-coloured text */
  --sttf-accent-fill:   #2b67e8;   /* white on it 4.99 */
  --sttf-accent-fill-hover: #2a64d6;
  --sttf-accent-ink:    #ffffff;
  --sttf-accent-soft:   #1a2b4d;   /* ink on it 12.49 */

  --sttf-good:          #2fd39a;
  --sttf-good-soft:     #16343b;
  --sttf-danger:        #ff8a7a;   /*  7.59 */
  --sttf-danger-soft:   #3a1f28;

  --sttf-glow:          rgba(67, 131, 255, .18);
  --sttf-skel-sheen:    rgba(255, 255, 255, .05);
  --sttf-shadow:        inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px #232f47, 0 24px 56px -24px rgba(0, 0, 0, .65);
  --sttf-btn-shadow:    inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px -8px rgba(43, 103, 232, .55);
  --sttf-cta:           #f5c865;
  --sttf-cta-hover:     #e9b949;   /* ink on it 10.18 */
  --sttf-cta-ink:       #111318;   /* 11.80 on #f5c865 */
  --sttf-cta-shadow:    inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -10px rgba(245, 200, 101, .55);

  --sttf-field-bg:      #172035;   /* boxes sit a step above the card */
  --sttf-field-shadow:  inset 0 1px 0 rgba(255, 255, 255, .03);

  --sttf-radius:        12px;
  --sttf-font:          "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --sttf-display:       "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --sttf-mono:          "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

.sttf[data-sttf-skin="stt"][data-sttf-theme="light"] {
  --sttf-surface:       #ffffff;
  --sttf-surface-2:     #f5f7fb;

  --sttf-ink:           #121a2b;   /* 17.38 — the brand card colour, inverted */
  --sttf-ink-2:         #3e4a5f;   /*  8.94 */
  --sttf-ink-3:         #5a6577;   /*  5.89 */

  --sttf-line:          #e2e8f0;
  --sttf-line-2:        #c9d2df;
  --sttf-field-line:    #7d8a9e;   /*  3.50 */

  --sttf-accent:        #1a56b8;   /*  6.85 — brand light accent */
  --sttf-accent-text:   #1a56b8;
  --sttf-accent-fill:   #1a56b8;
  --sttf-accent-fill-hover: #164a9f;
  --sttf-accent-ink:    #ffffff;
  --sttf-accent-soft:   #e8effb;

  --sttf-good:          #0f7a4f;
  --sttf-good-soft:     #e3f4ec;
  --sttf-danger:        #b42318;
  --sttf-danger-soft:   #fdecea;

  --sttf-glow:          rgba(26, 86, 184, .12);
  --sttf-skel-sheen:    rgba(255, 255, 255, .75);
  --sttf-shadow:        0 0 0 1px #e2e8f0, 0 1px 2px rgba(18, 26, 43, .05), 0 16px 36px -14px rgba(18, 26, 43, .16);
  --sttf-btn-shadow:    inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(26, 86, 184, .45);
  --sttf-cta-shadow:    inset 0 0 0 1px rgba(17, 19, 24, .08), 0 6px 14px -6px rgba(150, 110, 20, .45);
  --sttf-field-bg:      #ffffff;
  --sttf-field-shadow:  0 1px 2px rgba(18, 26, 43, .06);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  .sttf[data-sttf-skin="stt"][data-sttf-theme="auto"] {
    --sttf-surface:       #ffffff;
    --sttf-surface-2:     #f5f7fb;
    --sttf-ink:           #121a2b;
    --sttf-ink-2:         #3e4a5f;
    --sttf-ink-3:         #5a6577;
    --sttf-line:          #e2e8f0;
    --sttf-line-2:        #c9d2df;
    --sttf-field-line:    #7d8a9e;
    --sttf-accent:        #1a56b8;
    --sttf-accent-text:   #1a56b8;
    --sttf-accent-fill:   #1a56b8;
    --sttf-accent-fill-hover: #164a9f;
    --sttf-accent-ink:    #ffffff;
    --sttf-accent-soft:   #e8effb;
    --sttf-good:          #0f7a4f;
    --sttf-good-soft:     #e3f4ec;
    --sttf-danger:        #b42318;
    --sttf-danger-soft:   #fdecea;
    --sttf-glow:          rgba(26, 86, 184, .12);
    --sttf-skel-sheen:    rgba(255, 255, 255, .75);
    --sttf-shadow:        0 0 0 1px #e2e8f0, 0 1px 2px rgba(18, 26, 43, .05), 0 16px 36px -14px rgba(18, 26, 43, .16);
    --sttf-btn-shadow:    inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(26, 86, 184, .45);
    --sttf-cta-shadow:    inset 0 0 0 1px rgba(17, 19, 24, .08), 0 6px 14px -6px rgba(150, 110, 20, .45);
    --sttf-field-bg:      #ffffff;
    --sttf-field-shadow:  0 1px 2px rgba(18, 26, 43, .06);
    color-scheme: light;
  }
}