/* Miracle on Main theme: tokens and theme-specific art only.
   Palette from Rebecca's brief: Christmas red, deep evergreen, warm cream, antique gold. */
/* Self-hosted typefaces (SIL Open Font License; license files in fonts/). */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin-standard-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root[data-theme="miracle"] {
  /* Color */
  --c-paper: #FBF6EC;
  --c-paper-deep: #F3EAD8;
  --c-snow: #FFFCF6;
  --c-ink: #2B1B16;
  --c-ink-soft: #5E4A40;
  --c-accent: #8E1B24;
  --c-accent-deep: #6C121A;
  --c-accent-ink: #FFF8EE;
  --c-second: #173D2F;
  --c-second-ink: #EFE4C8;
  --c-metal: #A8843F;
  --c-metal-soft: #D8BF86;
  --c-rule: #E6D8BE;
  --c-open: #8FD3A0;
  --c-shadow: rgba(60, 30, 20, .35);
  --placard-rule: rgba(216, 191, 134, .28);

  /* Type */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;

  /* Shape and depth */
  --radius-btn: 2px;
  --shadow-card: 0 14px 30px -18px rgba(60, 30, 20, .45);
  --shadow-deep: 0 34px 70px -34px rgba(60, 30, 20, .6);

  /* Display window */
  --window-shade: radial-gradient(ellipse 62% 52% at 50% 50%, rgba(20, 8, 6, .55), rgba(20, 8, 6, .12) 70%, rgba(20, 8, 6, .35));
  --glass-sheen: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 78%, rgba(255,255,255,0) 84%);
  --logo-shadow: drop-shadow(0 6px 18px rgba(0,0,0,.45));

  /* Timing windows: reservation grace period vs waitlist callback */
  --window-grace: #8E1B24;
  --window-grace-tint: #F7E6E2;
  --window-callback: #173D2F;
  --window-callback-tint: #E4EDE4;

  /* Krampus postcard */
  --postcard-back: #FCF7EC;
  --stamp-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='84' height='100' fill='white'/%3E%3Cg fill='black'%3E%3Ccircle cx='0' cy='6' r='3'/%3E%3Ccircle cx='0' cy='18' r='3'/%3E%3Ccircle cx='0' cy='30' r='3'/%3E%3Ccircle cx='0' cy='42' r='3'/%3E%3Ccircle cx='0' cy='54' r='3'/%3E%3Ccircle cx='0' cy='66' r='3'/%3E%3Ccircle cx='0' cy='78' r='3'/%3E%3Ccircle cx='0' cy='90' r='3'/%3E%3Ccircle cx='84' cy='6' r='3'/%3E%3Ccircle cx='84' cy='18' r='3'/%3E%3Ccircle cx='84' cy='30' r='3'/%3E%3Ccircle cx='84' cy='42' r='3'/%3E%3Ccircle cx='84' cy='54' r='3'/%3E%3Ccircle cx='84' cy='66' r='3'/%3E%3Ccircle cx='84' cy='78' r='3'/%3E%3Ccircle cx='84' cy='90' r='3'/%3E%3Ccircle cx='6' cy='0' r='3'/%3E%3Ccircle cx='18' cy='0' r='3'/%3E%3Ccircle cx='30' cy='0' r='3'/%3E%3Ccircle cx='42' cy='0' r='3'/%3E%3Ccircle cx='54' cy='0' r='3'/%3E%3Ccircle cx='66' cy='0' r='3'/%3E%3Ccircle cx='78' cy='0' r='3'/%3E%3Ccircle cx='6' cy='100' r='3'/%3E%3Ccircle cx='18' cy='100' r='3'/%3E%3Ccircle cx='30' cy='100' r='3'/%3E%3Ccircle cx='42' cy='100' r='3'/%3E%3Ccircle cx='54' cy='100' r='3'/%3E%3Ccircle cx='66' cy='100' r='3'/%3E%3Ccircle cx='78' cy='100' r='3'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='84' height='100' fill='%23FFFCF6'/%3E%3Crect x='7' y='7' width='70' height='86' fill='%238E1B24'/%3E%3Crect x='11' y='11' width='62' height='78' fill='none' stroke='%23D8BF86' stroke-width='1'/%3E%3Ctext x='42' y='46' text-anchor='middle' font-family='Georgia,serif' font-size='22' fill='%23FFF8EE'%3E5%C2%B7XII%3C/text%3E%3Ctext x='42' y='66' text-anchor='middle' font-family='Georgia,serif' font-size='7.5' letter-spacing='.6' fill='%23D8BF86'%3EKRAMPUSNACHT%3C/text%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;

  /* Story: the shift from Christmas into Hatter's Garden */
  --shift-bg: #E8EEDA;
  --shift-rule: #CBD5B8;
  --shift-ink: #3E5A3A;
  --shift-motifs:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%237A6A3C' stroke-width='1.6'%3E%3Ccircle cx='60' cy='60' r='46'/%3E%3Ccircle cx='60' cy='60' r='40' stroke-width='.8'/%3E%3Cg stroke-width='2'%3E%3Cpath d='M60 22v7M60 91v7M22 60h7M91 60h7'/%3E%3C/g%3E%3Cpath d='M60 60L60 34M60 60L78 70' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='60' r='2.6' fill='%237A6A3C'/%3E%3Cpath d='M60 14v-6M54 8h12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg font-family='Georgia,serif' font-size='44'%3E%3Ctext x='4' y='56' fill='%238E1B24' transform='rotate(-12 20 40)'%3E%E2%99%A5%3C/text%3E%3Ctext x='54' y='60' fill='%232B1B16'%3E%E2%99%A0%3C/text%3E%3Ctext x='104' y='58' fill='%238E1B24' transform='rotate(10 120 40)'%3E%E2%99%A6%3C/text%3E%3Ctext x='150' y='60' fill='%232B1B16' transform='rotate(-6 165 40)'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50 50)' fill='%23C98B93' opacity='.75'%3E%3Cellipse rx='11' ry='26' cy='-22'/%3E%3Cellipse rx='11' ry='26' cy='-22' transform='rotate(60)'/%3E%3Cellipse rx='11' ry='26' cy='-22' transform='rotate(120)'/%3E%3Cellipse rx='11' ry='26' cy='-22' transform='rotate(180)'/%3E%3Cellipse rx='11' ry='26' cy='-22' transform='rotate(240)'/%3E%3Cellipse rx='11' ry='26' cy='-22' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='9' fill='%23D8BF86'/%3E%3C/svg%3E");
  --shift-motifs-size: 96px 96px, 150px 60px, 84px 84px;
  --shift-motifs-pos: right 26px top 26px, left 22px bottom 22px, right 34px bottom 18px;
}