/* =========================================
             Rosé Pine Variables
   ========================================= */

/* --- Rosé Pine Dawn --- */
:root {
  /* Base palette */
  --rp-dawn-base:        #faf4ed;
  --rp-dawn-surface:     #f2e9e1;
  --rp-dawn-overlay:     #dfdad9;
  --rp-dawn-muted:       #9893a5;
  --rp-dawn-subtle:      #797593;
  --rp-dawn-text:        #575279;

  /* Accents */
  --rp-dawn-love:        #b4637a;
  --rp-dawn-gold:        #ea9d34;
  --rp-dawn-rose:        #d7827e;
  --rp-dawn-pine:        #286983;
  --rp-dawn-foam:        #56949f;
  --rp-dawn-iris:        #907aa9;

  /* Highlight tones */
  --rp-dawn-hl-low:      #f4ede8;
  --rp-dawn-hl-med:      #dfdad9;
  --rp-dawn-hl-high:     #cecacd;
}

/* --- Rosé Pine --- */
@media (prefers-color-scheme: dark) {
  :root {
    --rp-base:        #191724;
    --rp-surface:     #1f1d2e;
    --rp-overlay:     #26233a;
    --rp-muted:       #6e6a86;
    --rp-subtle:      #908caa;
    --rp-text:        #e0def4;

    --rp-love:        #eb6f92;
    --rp-gold:        #f6c177;
    --rp-rose:        #ebbcba;
    --rp-pine:        #31748f;
    --rp-foam:        #9ccfd8;
    --rp-iris:        #c4a7e7;

    --rp-hl-low:      #21202e;
    --rp-hl-med:      #403d52;
    --rp-hl-high:     #524f67;
  }
}


/* =========================================
            Archie Theme Mapping
   ========================================= */

:root {
  --color-background:        var(--rp-dawn-base);
  --color-text:              var(--rp-dawn-text);
  --color-text-muted:        var(--rp-dawn-iris);
  --color-text-meta:         var(--rp-dawn-muted);

  --color-primary:           var(--rp-dawn-foam);
  --color-primary-hover:     var(--rp-dawn-iris);

  --color-border:            var(--rp-dawn-hl-high);

  --color-background-code:   var(--rp-dawn-surface);
  --color-background-pre:    var(--rp-dawn-surface);
  --color-background-toc:    var(--rp-dawn-overlay);
  --color-background-draft:  var(--rp-dawn-love);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background-dark:        var(--rp-base);
    --color-text-dark:              var(--rp-text);
    --color-text-muted-dark:        var(--rp-rose);

    --color-primary-dark:           var(--rp-pine);
    --color-primary-hover-dark:     var(--rp-gold);

    --color-border-dark:            var(--rp-hl-high);

    --color-background-code-dark:   var(--rp-surface);
    --color-background-pre-dark:    var(--rp-surface);
    --color-background-toc-dark:    var(--rp-overlay);
    --color-background-draft-dark:  color-mix(in srgb, var(--rp-love) 40%, transparent);
  }
}