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

  --ink:      #1B1A17;
  --panel:    #24221D;
  --paper:    #EDE6D6;
  --paper-dim:#D8CFB8;
  --muted:    #9C9483;
  --red-ink:  #B3121A;
  --gold-ink: #C9971F;
  --extra-ink:#4C7A93;
  --line:     #3A362E;
  --canvas-grid-line: var(--bg-panel);
  --font-ui:  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-type:"Courier New", ui-monospace, monospace;

  --text-size: 22px;
  --height: 24px;
  --line-height: var(--height);

  --tile-radius: 3px;

  --effect-3d: 0;

  --vignette-fade-width: 120px;

  --tile-locked: #B7AC90;
  --tile-active: #9C7A28;
  --tile-text:   var(--ink);

  --bg:        var(--ink);
  --bg-panel:  var(--panel);
  --text:      var(--paper);
  --border:    var(--line);
  --canvas-bg: #12110F;

  --bg-gradient:
    repeating-linear-gradient(
      45deg,
      rgba(237,230,214,0.035) 0px,
      rgba(237,230,214,0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      to right,
      #100F0C 0%,
      #100F0C calc(50% - var(--content-half-width) - var(--vignette-fade-width)),
      var(--ink) calc(50% - var(--content-half-width)),
      var(--ink) calc(50% + var(--content-half-width)),
      #100F0C calc(50% + var(--content-half-width) + var(--vignette-fade-width)),
      #100F0C 100%
    ) no-repeat;

  --accent-ink: #B8963A;
  --online-ink: #7C8F4B;
  --found-bg: rgba(201,151,31,0.14);
  --card-shadow: 0 2px 6px rgba(0,0,0,.35);
  --card-shadow-hover: 0 4px 14px rgba(0,0,0,.45);
  --badge-shadow: 0 1px 2px rgba(0,0,0,.3);
  --log-divider: var(--border);

  --modal-bg:          #322D22;
  --modal-ink:         var(--paper);
  --modal-muted:       #C2B79D;
  --modal-hint:        #A89C7E;
  --modal-accent:      var(--gold-ink);
  --modal-accent-text: var(--ink);
}

:root.day-mode,
:root[data-theme="old"].day-mode{
  color-scheme: light;

  --bg:        #F2ECDC;
  --bg-panel:  #E4DCC3;
  --text:      #1B1A17;
  --border:    #BC9E4E;
  --canvas-bg: #D9D0B8;

  --bg-gradient:
    repeating-linear-gradient(
      45deg,
      rgba(63,51,32,0.035) 0px,
      rgba(63,51,32,0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
    to right,
    #C9B98A 0%,
    #C9B98A calc(50% - var(--content-half-width) - var(--vignette-fade-width)),
    #F2ECDC calc(50% - var(--content-half-width)),
    #F2ECDC calc(50% + var(--content-half-width)),
    #C9B98A calc(50% + var(--content-half-width) + var(--vignette-fade-width)),
    #C9B98A 100%
  ) no-repeat;

  --tile-locked: var(--paper);
  --tile-active: var(--gold-ink);

  --line:      #C2B594;
  --canvas-grid-line: #C2B594;
  --tile-text: #3F3320;

  --muted:        #67511E;
  --accent-ink:   #704900;
  --online-ink:   #55692B;
  --card-shadow: 0 1px 3px rgba(90,70,20,.18);
  --card-shadow-hover: 0 3px 10px rgba(90,70,20,.24);
  --badge-shadow: 0 1px 2px rgba(90,70,20,.14);
  --extra-ink:    #11435F;
  --repeated-ink: #66531D;
  --log-divider:  #6E5C38;

  --modal-bg:          var(--paper);
  --modal-ink:         var(--ink);
  --modal-muted:       #5a5647;
  --modal-hint:        #8a8577;
  --modal-accent:      var(--accent-ink);
  --modal-accent-text: var(--paper);
}