/* ═══════════════════════════════════════════
   THEMES — light & dark surface tokens
   Every section reads these; swap via data-theme.
   ═══════════════════════════════════════════ */

/* ─── DARK (default for the brand) ─── */
[data-theme="dark"] {
  --page-bg:          var(--bg);                    /* unified canvas */
  --bg:               var(--color-black);          /* #1E2124 */
  --bg-elevated:      #25282B;                     /* slight lift */
  --bg-sunk:          var(--color-black-deep);     /* #14171A */
  --bg-accent:        var(--color-orange-700);     /* for CTA blocks */

  --text:             var(--color-white);
  --text-soft:        var(--color-grey-200);       /* #CDCDCD */
  --text-muted:       var(--color-grey-400);       /* #9DA2A8 */
  --text-subtle:      var(--color-grey-500);       /* #858A90 */
  --text-on-accent:   var(--color-white);

  --border:           rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-accent:    rgba(255, 92, 70, 0.35);

  --divider:          rgba(255, 255, 255, 0.06);
  --grid-line:        rgba(255, 255, 255, 0.06);   /* editorial grid */

  --overlay-soft:     rgba(255, 255, 255, 0.03);
  --overlay-accent:   rgba(255, 92, 70, 0.08);

  --shadow:           0 20px 60px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ─── LIGHT ─── */
[data-theme="light"] {
  --page-bg:          var(--bg);                    /* unified canvas */
  --bg:               #E6E6E6;                     /* editorial warm grey */
  --bg-elevated:      #EFEFEF;
  --bg-sunk:          #DCDCDC;
  --bg-accent:        var(--color-orange-700);

  --text:             #1A1A1A;
  --text-soft:        #2E2E2E;
  --text-muted:       #555555;
  --text-subtle:      #7A7A7A;
  --text-on-accent:   var(--color-white);

  --border:           #B4B4B4;
  --border-strong:    #9E9E9E;
  --border-accent:    rgba(255, 92, 70, 0.55);

  --divider:          #B4B4B4;
  --grid-line:        rgba(0, 0, 0, 0.08);         /* editorial grid */

  --overlay-soft:     rgba(0, 0, 0, 0.03);
  --overlay-accent:   rgba(255, 92, 70, 0.08);

  --shadow:           0 10px 30px rgba(73, 78, 84, 0.08);

  color-scheme: light;
}

/* ─── ACCENT (solid orange section, e.g. final CTA) ─── */
[data-theme="accent"] {
  --bg:               var(--color-orange-700);
  --bg-elevated:      var(--color-orange-500);
  --bg-sunk:          var(--color-orange-800);
  --bg-accent:        var(--color-black);

  --text:             var(--color-white);
  --text-soft:        var(--color-white);
  --text-muted:       rgba(255, 255, 255, 0.80);
  --text-subtle:      rgba(255, 255, 255, 0.65);
  --text-on-accent:   var(--color-white);

  --border:           rgba(255, 255, 255, 0.20);
  --border-strong:    rgba(255, 255, 255, 0.40);
  --border-accent:    var(--color-white);

  --divider:          rgba(255, 255, 255, 0.15);
  --grid-line:        rgba(255, 255, 255, 0.18);

  --overlay-soft:     rgba(255, 255, 255, 0.08);
  --overlay-accent:   rgba(255, 255, 255, 0.12);

  --shadow:           0 20px 60px rgba(253, 42, 15, 0.28);

  color-scheme: light;
}

/* ── Every [data-theme] block behaves as a themed surface ── */
[data-theme] {
  background: var(--bg);
  color: var(--text);
}