/* Groovy '70s theme. A theme only sets these variables; base.css does the rest.
   To add a theme later, copy this file, change the values and the selector name. */

@font-face {
  font-family: 'Shrikhand';
  src: url('../fonts/shrikhand-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root[data-skin='groovy'] {
  --font-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --page-bg: #f7b267;
  --page-art: repeating-conic-gradient(from 0deg at 50% 118%, #f4a259 0deg 9deg, #f7c27f 9deg 18deg);
  --ink: #4a2c1a;
  --ink-soft: #6b3f23;

  --bar-bg: #4a2c1a;
  --bar-ink: #fff1d6;
  --bar-raised: #6b3f23;
  --stripes: linear-gradient(#c0392b 0 33.3%, #e67e22 33.3% 66.6%, #f1c40f 66.6% 100%);

  --accent: #e67e22;
  --accent-ink: #2b1407;
  --accent-2: #f1c40f;
  --accent-3: #c0392b;

  --tab-ink: #fff1d6;
  --tab-border: #e67e22;
  --tab-on-bg: #f1c40f;
  --tab-on-ink: #4a2c1a;

  --tool-bg: #fff1d6;
  --tool-ink: #4a2c1a;

  --card-face: #fff6e5;
  --card-edge: #4a2c1a;
  --card-shadow: 0 calc(var(--cw) * 0.045) 0 rgba(74, 44, 26, 0.5);
  --card-lift: 0 calc(var(--cw) * 0.14) calc(var(--cw) * 0.22) rgba(74, 44, 26, 0.45);
  --card-radius: calc(var(--cw) * 0.15);
  --card-red: #b3261e;
  --card-black: #4a2c1a;
  --card-back:
    repeating-linear-gradient(
      180deg,
      #c0392b 0 calc(var(--cw) * 0.11),
      #e67e22 calc(var(--cw) * 0.11) calc(var(--cw) * 0.22),
      #f1c40f calc(var(--cw) * 0.22) calc(var(--cw) * 0.33),
      #6b3f23 calc(var(--cw) * 0.33) calc(var(--cw) * 0.44)
    );
  --face-bg: #f1c40f;
  --face-ring: #e67e22;

  --slot-border: rgba(74, 44, 26, 0.5);
  --slot-fill: rgba(255, 241, 214, 0.35);
  --slot-ink: rgba(74, 44, 26, 0.5);

  --glow: #4a2c1a;
  --hint-ring: #fff1d6;
  --select-ring: #c0392b;

  --pop-bg: #c0392b;
  --pop-ink: #fff1d6;
  --pop-ring: #f1c40f;

  --tile-face: #fff6e5;
  --tile-ink: #4a2c1a;
  --tile-edge-1: #f1c40f;
  --tile-edge-2: #e67e22;
  --tile-blocked: #eed6ab;
  --tray-bg: #4a2c1a;
  --tray-slot: #6b3f23;
  --path: #c0392b;

  --panel: #fff6e5;
  --panel-ink: #4a2c1a;
  --backdrop: rgba(74, 44, 26, 0.6);
}