/* The 5 classic calendar designs. One block per theme.
 * To add a theme: copy a block, change the id, add it to themes.js and to the
 * allowed values of calendars.style in SQL.
 * Every design uses the same two fonts as the site: Playfair Display for the
 * title and door numbers (here), Manrope for everything else. Designs differ by
 * colour, door shape and texture, never by font.
 *
 * Custom properties used around the calendar:
 *   --t-bg / --t-text / --t-muted   page background and text on it
 *   --t-accent                      highlights (sheet border, focus)
 *   --t-hole / --t-hole-ink         an opened door (the hole behind it)
 *   --t-glow                        the glow around today's door
 *   --t-font, --t-font-style, --t-font-weight   numbers and titles
 * .tpanel[data-theme] paints the calendar background,
 * [data-theme] .ttl is the title, [data-theme] .door is one door. */

.door {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}
.ttl { margin: 0; line-height: 1.1; }

/* Hearth -------------------------------------------------------------- */
[data-theme="hearth"] {
  --t-bg: #1E4636; --t-text: #F3E3B5; --t-muted: #D7C99E; --t-accent: #D8B25A;
  --t-hole: #10261D; --t-hole-ink: #CDBF92; --t-glow: rgba(243, 227, 181, 0.7);
  --t-font: 'Playfair Display', Georgia, serif; --t-font-style: normal; --t-font-weight: 700;
}
.tpanel[data-theme="hearth"] { background: #1E4636; border-top: 6px solid #D8B25A; }
[data-theme="hearth"] .ttl { color: #F3E3B5; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 22px; }
[data-theme="hearth"] .door { background: #A4262C; border: 1px solid #D8B25A; border-radius: 5px; color: #F3E3B5; font-family: 'Playfair Display', serif; font-weight: 700; }

/* Gingerbread --------------------------------------------------------- */
[data-theme="gingerbread"] {
  --t-bg: #7A4B2E; --t-text: #FFF4E6; --t-muted: #F1DCC4; --t-accent: #FFF4E6;
  --t-hole: #55311D; --t-hole-ink: #F1DCC4; --t-glow: rgba(255, 244, 230, 0.6);
  --t-font: 'Playfair Display', Georgia, serif; --t-font-style: italic; --t-font-weight: 700;
}
.tpanel[data-theme="gingerbread"] { background: #7A4B2E; }
[data-theme="gingerbread"] .ttl { color: #FFF4E6; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 22px; }
[data-theme="gingerbread"] .door { background: #95593A; border: 2px dashed #FFF4E6; border-radius: 12px; color: #FFF4E6; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 15px; }

/* Midnight Foil (default) --------------------------------------------- */
[data-theme="midnight"] {
  --t-bg: #101B3B; --t-text: #E2C275; --t-muted: #C4CCE3; --t-accent: #E2C275;
  --t-hole: #0A1230; --t-hole-ink: #9AA6CF; --t-glow: rgba(255, 214, 120, 0.55);
  --t-font: 'Playfair Display', Georgia, serif; --t-font-style: italic; --t-font-weight: 600;
}
.tpanel[data-theme="midnight"] { background-color: #101B3B; background-image: radial-gradient(rgba(226, 194, 117, 0.4) 1px, transparent 1.6px); background-size: 18px 18px; }
[data-theme="midnight"] .ttl { color: #E2C275; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 26px; }
[data-theme="midnight"] .door { background: #18285A; border: 1px solid #C9A44C; border-radius: 4px; color: #E2C275; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 20px; }

/* Peppermint ---------------------------------------------------------- */
[data-theme="peppermint"] {
  --t-bg: #FCEFF1; --t-text: #B81E33; --t-muted: #7A1424; --t-accent: #D7263D;
  --t-hole: #F3C9CF; --t-hole-ink: #8E1728; --t-glow: rgba(215, 38, 61, 0.45);
  --t-font: 'Playfair Display', Georgia, serif; --t-font-style: normal; --t-font-weight: 800;
}
.tpanel[data-theme="peppermint"] { background: #FCEFF1; border: 6px solid #D7263D; border-image: repeating-linear-gradient(45deg, #D7263D 0 8px, #FFFFFF 8px 16px) 6; border-radius: 0; }
[data-theme="peppermint"] .ttl { color: #B81E33; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 22px; }
[data-theme="peppermint"] .door { background: #FFFFFF; border: 3px solid #D7263D; border-radius: 999px; color: #B81E33; font-family: 'Playfair Display', serif; font-weight: 800; }

/* Seventies ----------------------------------------------------------- */
[data-theme="seventies"] {
  --t-bg: #F2E2C4; --t-text: #6B3F24; --t-muted: #5A3520; --t-accent: #B4531F;
  --t-hole: #DCC59E; --t-hole-ink: #6B3F24; --t-glow: rgba(180, 83, 31, 0.55);
  --t-font: 'Playfair Display', Georgia, serif; --t-font-style: normal; --t-font-weight: 800;
}
.tpanel[data-theme="seventies"] { background: #F2E2C4; }
[data-theme="seventies"] .ttl { color: #6B3F24; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px; }
[data-theme="seventies"] .door { background: #B4531F; border-radius: 16px; color: #FFF7E8; font-family: 'Playfair Display', serif; font-weight: 700; }
[data-theme="seventies"] .door:nth-child(4n+2), [data-theme="seventies"] .cell:nth-child(4n+2) > .door { background: #8F6416; }
[data-theme="seventies"] .door:nth-child(4n+3), [data-theme="seventies"] .cell:nth-child(4n+3) > .door { background: #6B3F24; }
[data-theme="seventies"] .door:nth-child(4n+4), [data-theme="seventies"] .cell:nth-child(4n+4) > .door { background: #2F5D4E; }