/*
  LAYER 2 - THEME: midnight. The home page redesign. Dark in both colour schemes, on purpose.

  Applied with <html data-theme="midnight">, which the layout sets from ViewData["Theme"]. The attribute
  adds specificity, so these win over the default theme's prefers-color-scheme block without !important.
  Only roles that differ from default.css are listed.
*/

:root[data-theme="midnight"] {
  color-scheme: dark;

  /* surfaces */
  --bg:               var(--p-onyx-950);
  --bg-raised:        var(--p-onyx-900);
  --bg-sunken:        var(--p-onyx-950);
  --code-bg:          transparent;
  --header-bg:        color-mix(in srgb, var(--p-onyx-950) 92%, transparent);
  --footer-bg:        var(--p-onyx-950);

  /* the four bands, top to bottom: slate, navy, black, slate */
  --section-opening-bg:  var(--p-slate-800);
  --section-hero-bg:     var(--p-navy-900);
  --section-gameday-bg:  var(--p-onyx-900);
  --section-closer-bg:   var(--p-slate-800);
  --chip-bg:             color-mix(in srgb, var(--p-slate-800) 70%, transparent);

  /* borders */
  --border:             var(--p-onyx-700);
  --outline-on-opening: var(--p-steel-400);
  --outline-on-hero:    var(--p-gray-800);

  /* text */
  --text:             var(--p-gray-100);
  --text-strong:      var(--p-white);
  --text-dim:         var(--p-gray-400);
  --text-soft:        var(--p-slate-200);
  --text-lead:        var(--p-gray-300);
  --text-muted:       var(--p-steel-400);
  --text-faint:       var(--p-gray-700);
  --footer-text:      var(--p-gray-600);
  --footer-link:      var(--p-gray-600);
  --code-text:        var(--p-sky-100);

  /* accent and links */
  --accent:           var(--p-sky-200);
  --accent-hover:     var(--p-sky-300);
  --accent-text:      var(--p-sky-950);
  --accent-dim:       var(--p-navy-900);
  --accent-strong:    var(--p-sky-400);
  --accent-bright:    var(--p-sky-300);
  --link-hover:       var(--p-sky-100);

  /* feedback */
  --danger:           var(--p-red-200);

  /* shape */
  --radius-control:   var(--radius-8);
  --radius-card:      var(--radius-12);
  --radius-media:     var(--radius-12);

  /* type */
  --font-body:        var(--p-font-inter);
  --font-code:        var(--p-font-jetbrains);
  --brand-size:       1.0625rem;
  --brand-mark-size:  1.875rem;
  --nav-size:         0.9375rem;
  --footer-size:      0.875rem;

  /* controls. The 1px is the button's border, so the box lands on the design's 14px / 22px. */
  --button-padding:   calc(0.875rem - 1px) calc(1.375rem - 1px);
  --button-size:      1rem;
  --button-weight:    600;
  --button-press:     0.97;
  --cta-padding:      calc(0.5rem - 1px) calc(0.875rem - 1px);
  --cta-weight:       600;

  --mark-on-light-display: none;
  --mark-on-dark-display:  block;
}