/* ============================================================
   Tanvir Creates — Semantic Theme Tokens
   Built entirely from #040055, #010030, #FFFFFF (+ blends).
   Light is default (:root). Dark applies via system preference
   OR an explicit [data-theme="dark"]. [data-theme="light"] wins
   over the system preference.
   ============================================================ */

:root {
  --surface-page:    var(--white);
  --surface-alt:     var(--gray-50);
  --surface-card:    var(--white);
  --surface-inverse: var(--blue);   /* deep-blue feature section */
  --surface-sunken:  var(--gray-100);

  --text-primary:    var(--navy);
  --text-secondary:  var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-on-accent:  var(--white);  /* white on blue fill — ~15:1 */
  --text-on-inverse: var(--white);
  --text-inverse-muted: rgba(255,255,255,0.72);

  --accent:          var(--blue);
  --accent-hover:    var(--navy);
  --accent-pressed:  var(--navy);
  --link:            var(--blue);   /* #040055 on white — very high contrast */
  --link-hover:      var(--navy);

  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-inverse:  rgba(255,255,255,0.16);

  --focus-ring:      var(--blue);
  --overlay:         rgba(1,0,48,0.48);

  color-scheme: light;
}

/* System-preference dark ([data-theme="light"] overrides via specificity) */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:    var(--navy);
    --surface-alt:     var(--ink-surface);
    --surface-card:    var(--ink-surface);
    --surface-inverse: var(--blue);
    --surface-sunken:  var(--ink-surface2);

    --text-primary:    var(--white);
    --text-secondary:  color-mix(in srgb, var(--white) 78%, var(--navy));
    --text-muted:      color-mix(in srgb, var(--white) 55%, var(--navy));
    --text-on-accent:  var(--navy);   /* navy on the light accent-tint */
    --text-on-inverse: var(--white);
    --text-inverse-muted: rgba(255,255,255,0.72);

    --accent:          var(--accent-tint);
    --accent-hover:    var(--accent-light);
    --accent-pressed:  var(--accent-tint);
    --link:            var(--accent-tint);
    --link-hover:      var(--accent-light);

    --border-subtle:   var(--ink-border);
    --border-strong:   color-mix(in srgb, var(--white) 26%, var(--navy));
    --border-inverse:  rgba(255,255,255,0.16);

    --focus-ring:      var(--accent-tint);
    --overlay:         rgba(0,0,0,0.6);
    --danger:          var(--red-400);

    color-scheme: dark;
  }
}

/* Explicit toggle to dark (wins over system) */
[data-theme="dark"] {
  --surface-page:    var(--navy);
  --surface-alt:     var(--ink-surface);
  --surface-card:    var(--ink-surface);
  --surface-inverse: var(--blue);
  --surface-sunken:  var(--ink-surface2);

  --text-primary:    var(--white);
  --text-secondary:  color-mix(in srgb, var(--white) 78%, var(--navy));
  --text-muted:      color-mix(in srgb, var(--white) 55%, var(--navy));
  --text-on-accent:  var(--navy);
  --text-on-inverse: var(--white);
  --text-inverse-muted: rgba(255,255,255,0.72);

  --accent:          var(--accent-tint);
  --accent-hover:    var(--accent-light);
  --accent-pressed:  var(--accent-tint);
  --link:            var(--accent-tint);
  --link-hover:      var(--accent-light);

  --border-subtle:   var(--ink-border);
  --border-strong:   color-mix(in srgb, var(--white) 26%, var(--navy));
  --border-inverse:  rgba(255,255,255,0.16);

  --focus-ring:      var(--accent-tint);
  --overlay:         rgba(0,0,0,0.6);
  --danger:          var(--red-400);

  color-scheme: dark;
}