/*
  LAYER 2 - THEME: default. The site's original light/dark pair.

  A theme gives every role a value. This file is always loaded and must define EVERY role, so a page that
  opts into another theme can never end up with an undefined token. Other themes override what differs.

  Roles are named for what they do (--text-dim), not what they look like (--gray-400), so a redesign
  changes a theme file and leaves the components alone.
*/

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg:               var(--p-paper-50);
  --bg-raised:        var(--p-white);
  --bg-sunken:        var(--p-paper-100);
  --code-bg:          var(--p-paper-150);
  --header-bg:        var(--bg-raised);
  --footer-bg:        transparent;

  /* page sections (the home page's four bands; harmless elsewhere) */
  --section-opening-bg:  var(--bg-sunken);
  --section-hero-bg:     var(--bg);
  --section-gameday-bg:  var(--bg);
  --section-closer-bg:   var(--bg-sunken);
  --chip-bg:             color-mix(in srgb, var(--section-opening-bg) 70%, transparent);

  /* borders */
  --border:             var(--p-paper-300);
  --outline-on-opening: var(--border);
  --outline-on-hero:    var(--border);

  /* text */
  --text:             var(--p-ink-900);
  --text-strong:      var(--p-ink-900);
  --text-dim:         var(--p-ink-600);
  --text-soft:        var(--p-ink-600);
  --text-lead:        var(--p-ink-600);
  --text-muted:       var(--p-ink-600);
  --text-faint:       var(--p-ink-600);
  --footer-text:      var(--text-dim);
  --footer-link:      var(--accent);
  --code-text:        var(--text);

  /* accent and links */
  --accent:           var(--p-blue-700);
  --accent-hover:     color-mix(in srgb, var(--accent) 92%, white);
  --accent-text:      var(--p-white);
  --accent-dim:       var(--p-blue-50);
  --accent-strong:    var(--accent);
  --accent-bright:    var(--accent);
  --link-hover:       var(--accent-hover);

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

  /* shape */
  --radius-control:   var(--radius-6);
  --radius-card:      var(--radius-6);
  --radius-chip:      var(--radius-4);
  --radius-media:     var(--radius-6);

  /* type */
  --font-body:        var(--p-font-system);
  --font-code:        var(--p-font-system-mono);
  --brand-weight:     650;
  --brand-size:       1.05rem;
  --brand-mark-size:  2rem;
  --nav-size:         0.95rem;
  --footer-size:      0.9rem;

  /* controls */
  --button-padding:   0.6rem 1.15rem;
  --button-size:      0.97rem;
  --button-weight:    550;
  --button-press:     1;
  --cta-padding:      0.45rem 0.9rem;
  --cta-weight:       550;

  /* Which brand mark shows. The header carries both images; the theme picks. */
  --mark-on-light-display: block;
  --mark-on-dark-display:  none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:               var(--p-char-900);
    --bg-raised:        var(--p-char-800);
    --bg-sunken:        var(--p-char-950);
    --code-bg:          var(--p-char-750);

    --border:           var(--p-char-700);

    --text:             var(--p-char-100);
    --text-strong:      var(--p-char-100);
    --text-dim:         var(--p-char-400);
    --text-soft:        var(--p-char-400);
    --text-lead:        var(--p-char-400);
    --text-muted:       var(--p-char-400);
    --text-faint:       var(--p-char-400);

    --accent:           var(--p-teal-300);
    --accent-text:      var(--p-teal-950);
    --accent-dim:       var(--p-ocean-900);

    --danger:           var(--p-red-200);

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