@import url("./pack-base.css");

/* Signature look: Christmas (pine green, cranberry and gold on warm cream, a rich display serif, round pills, a scalloped edge under the top bar).
   Drawn from the "Christmas" seasonal concept of the "Storieze Homepage Concepts" design. A special-occasion look: the owner puts it on the whole
   site for December (it is never offered to visitors). It only applies while the page carries data-style-pack="christmas". */

html[data-style-pack="christmas"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #fbf3e4;
  --surface: #ffffff;
  --surface-muted: #fdf8ee;
  --surface-strong: #f3e6cc;
  --paper: #ffffff;
  --panel: #ffffff;
  --soft: #fdf8ee;
  --text: #1d2b24;
  --ink: #0f3b2e;
  --muted: #4a5750;
  --text-muted: #4a5750;
  --line: #eadfc9;
  --control-line: #e0d2b4;
  --control-line-strong: #c9b78f;
  --shadow: 0 10px 26px rgba(15, 59, 46, 0.1);
  --shadow-soft: 0 6px 16px rgba(15, 59, 46, 0.08);
  --glow: none;
  --action-text: #a3202f;
  --radius: 24px;

  /* what pack-base.css reads */
  --pk-page: #fbf3e4;
  --pk-surface: #ffffff;
  --pk-surface-2: #fdf8ee;
  --pk-surface-3: #f3e6cc;
  --pk-text: #1d2b24;
  --pk-text-2: #4a5750;
  --pk-heading: #0f3b2e;
  --pk-line: #eadfc9;
  --pk-line-2: #d3c3a2;
  --pk-primary: var(--st-primary, #a3202f);
  --pk-on-primary: #ffffff;
  --pk-link: #0f3b2e;
  --pk-danger: #a3202f;
  --pk-nav-bg: #0f3b2e;
  --pk-nav-text: #fbf3e4;
  --pk-nav-muted: #d8e3dc;
  --pk-nav-line: rgba(227, 176, 75, 0.32);
  --pk-nav-hover: rgba(251, 243, 228, 0.09);
  --pk-nav-active-bg: #e3b04b;
  --pk-nav-active-text: #0f3b2e;
  --pk-bar-bg: #0f3b2e;
  --pk-bar-text: #fbf3e4;
  --pk-bar-line: #0f3b2e;
  --pk-foot-bg: #0f3b2e;
  --pk-foot-line: rgba(227, 176, 75, 0.4);
  /* the sign-in page's green side: falling snow and a warm gold glow */
  --pk-brand-bg:
    radial-gradient(circle at 7% 9%, rgba(251, 243, 228, 0.75) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 14%, rgba(251, 243, 228, 0.6) 0 4px, transparent 5px),
    radial-gradient(circle at 60% 6%, rgba(251, 243, 228, 0.7) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 30%, rgba(227, 176, 75, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 95% 47%, rgba(251, 243, 228, 0.6) 0 3px, transparent 4px),
    radial-gradient(circle at 5% 33%, rgba(251, 243, 228, 0.5) 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 30% 105%, rgba(227, 176, 75, 0.25), transparent 60%),
    #0f3b2e;
  --pk-brand-text: #fbf3e4;
  --pk-brand-muted: #d8e3dc;
  --pk-brand-spark: #f2c866;
  --pk-eyebrow-bg: transparent;
  --pk-eyebrow-text: #a3202f;
  --pk-radius: 24px;
  --pk-radius-sm: 14px;
  --pk-shadow: none;
}

@media screen {
  html[data-style-pack="christmas"] body { background: #fbf3e4; color: #1d2b24; }
  html[data-style-pack="christmas"] ::selection { background: #a3202f; color: #fbf3e4; }

  /* rich display serif titles */
  html[data-style-pack="christmas"] h1 {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.02;
    font-size: clamp(38px, 4.8vw, 58px);
  }
  html[data-style-pack="christmas"] .choice strong,
  html[data-style-pack="christmas"] .price h3,
  html[data-style-pack="christmas"] .profile-section h3,
  html[data-style-pack="christmas"] .character-panel h3,
  html[data-style-pack="christmas"] .story-step-section h3 {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.12;
  }

  /* small labels: spaced capitals in cranberry */
  html[data-style-pack="christmas"] .eyebrow {
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }
  html[data-style-pack="christmas"] .appbar .eyebrow { color: #f2c866 !important; }

  /* the top bar is pine green, with a scalloped edge of cream along its bottom */
  html[data-style-pack="christmas"] .appbar {
    border-bottom: 0;
    padding-bottom: 12px;
    background: radial-gradient(circle at 15px 12px, #fbf3e4 0 14px, transparent 15px) left bottom / 30px 12px repeat-x, #0f3b2e !important;
  }
  html[data-style-pack="christmas"] .appbar h2 { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 26px; }
  html[data-style-pack="christmas"] .credits-chip { background: rgba(251, 243, 228, 0.12) !important; color: #fbf3e4 !important; border: 1px solid rgba(227, 176, 75, 0.6) !important; }
  html[data-style-pack="christmas"] .credits-chip .credits-count,
  html[data-style-pack="christmas"] .credits-chip strong,
  html[data-style-pack="christmas"] .credits-chip span { color: #fbf3e4 !important; }
  html[data-style-pack="christmas"] .credits-add { background: #e3b04b !important; color: #0f3b2e !important; }
  html[data-style-pack="christmas"] .appbar .icon-btn { background: rgba(251, 243, 228, 0.12) !important; color: #fbf3e4 !important; border: 1px solid rgba(227, 176, 75, 0.6) !important; }

  /* the sidebar: pine green with a scatter of snow, the current page in gold */
  html[data-style-pack="christmas"] .desktop-nav {
    background:
      radial-gradient(circle at 24% 70%, rgba(251, 243, 228, 0.6) 0 2px, transparent 3px),
      radial-gradient(circle at 78% 76%, rgba(251, 243, 228, 0.5) 0 2.5px, transparent 3.5px),
      radial-gradient(circle at 40% 84%, rgba(227, 176, 75, 0.8) 0 2.5px, transparent 3.5px),
      radial-gradient(circle at 66% 66%, rgba(251, 243, 228, 0.5) 0 2px, transparent 3px),
      radial-gradient(circle at 18% 90%, rgba(251, 243, 228, 0.55) 0 2px, transparent 3px),
      #0f3b2e !important;
  }
  html[data-style-pack="christmas"] .desktop-brand strong { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 26px; }
  html[data-style-pack="christmas"] .desktop-nav-item { border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="christmas"] .desktop-nav-item .nav-icon { background: transparent !important; color: #f2c866 !important; border-radius: 999px !important; }
  html[data-style-pack="christmas"] .desktop-nav-item.is-active .nav-icon { color: #0f3b2e !important; }
  html[data-style-pack="christmas"] .desktop-nav-label { color: #f2c866 !important; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }

  /* cards are cream-white with a soft border; the little tiles are baubles in cranberry, pine and gold */
  html[data-style-pack="christmas"] .choice-art { border: 0 !important; border-radius: 999px !important; color: #fbf3e4 !important; }
  html[data-style-pack="christmas"] .choice:nth-child(3n + 1) .choice-art { background: #a3202f !important; }
  html[data-style-pack="christmas"] .choice:nth-child(3n + 2) .choice-art { background: #0f3b2e !important; }
  html[data-style-pack="christmas"] .choice:nth-child(3n) .choice-art { background: #e3b04b !important; color: #0f3b2e !important; }
  html[data-style-pack="christmas"] .choice .choice-art .icon,
  html[data-style-pack="christmas"] .choice .choice-art span { color: inherit; }
  html[data-style-pack="christmas"] .choice:hover,
  html[data-style-pack="christmas"] .price:hover { border-color: #a3202f !important; }
  html[data-style-pack="christmas"] .price.featured,
  html[data-style-pack="christmas"] .price.active { background: #f3e6cc !important; border: 2px solid #a3202f !important; }
  html[data-style-pack="christmas"] .price-figure,
  html[data-style-pack="christmas"] .price-figure b,
  html[data-style-pack="christmas"] .price-figure .money { color: #a3202f !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="christmas"] .mini-item { border-left: 5px solid #e3b04b !important; }

  /* buttons: round cranberry pills; the smaller ones are pine outlines */
  html[data-style-pack="christmas"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked),
  html[data-style-pack="christmas"] .home-primary-action { border-radius: 999px !important; font-weight: 800; }
  html[data-style-pack="christmas"] .btn-secondary,
  html[data-style-pack="christmas"] .btn-quiet,
  html[data-style-pack="christmas"] .btn-saved {
    background: transparent !important;
    color: #0f3b2e !important;
    border: 2px solid #0f3b2e !important;
    border-radius: 999px !important;
  }
  html[data-style-pack="christmas"] .btn-secondary:hover,
  html[data-style-pack="christmas"] .btn-quiet:hover { background: #0f3b2e !important; color: #fbf3e4 !important; }
  html[data-style-pack="christmas"] input,
  html[data-style-pack="christmas"] select,
  html[data-style-pack="christmas"] textarea { background: #fdf8ee !important; border-color: #d3c3a2 !important; border-radius: 14px !important; }
  html[data-style-pack="christmas"] input:focus,
  html[data-style-pack="christmas"] select:focus,
  html[data-style-pack="christmas"] textarea:focus { outline: 2px solid #a3202f; outline-offset: 1px; }
  html[data-style-pack="christmas"] .chip,
  html[data-style-pack="christmas"] .segment,
  html[data-style-pack="christmas"] .lang-filter-btn { border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="christmas"] .footer-actions { border-top: 3px solid #e3b04b !important; }
  /* the pine-green footer: its quiet buttons are cream */
  html[data-style-pack="christmas"] .footer-actions .btn-secondary,
  html[data-style-pack="christmas"] .footer-actions .btn-quiet {
    color: #fbf3e4 !important;
    border-color: #fbf3e4 !important;
  }
  html[data-style-pack="christmas"] .footer-actions .btn-secondary:hover,
  html[data-style-pack="christmas"] .footer-actions .btn-quiet:hover { background: #fbf3e4 !important; color: #0f3b2e !important; }

  /* the sign-in page: green with snow on the left, the form as a cream card */
  html[data-style-pack="christmas"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1.02;
  }
  html[data-style-pack="christmas"] .auth-panel-wrap { background: #fbf3e4 !important; }
  html[data-style-pack="christmas"] .login-block {
    background: #ffffff;
    border: 1px solid #eadfc9;
    border-radius: 28px;
    padding: 38px 34px;
    box-shadow: 0 12px 30px rgba(15, 59, 46, 0.1);
  }
  html[data-style-pack="christmas"] .login-block h1 { font-size: clamp(30px, 3vw, 40px); }
  html[data-style-pack="christmas"] .auth-language-toggle .language-menu-trigger,
  html[data-style-pack="christmas"] .auth-language-toggle .language-menu-trigger span { color: #0f3b2e !important; }
}