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

/* Signature look: Halloween (midnight purple, pumpkin orange, slime green, a spooky headline face). Drawn from the "Halloween" seasonal concept
   of the "Storieze Homepage Concepts" design. A special-occasion look: the owner puts it on the whole site for the season (it is never offered to
   visitors). It only applies while the page carries data-style-pack="halloween". Colours come from the theme through --st-*. */

html[data-style-pack="halloween"] {
  color-scheme: dark;

  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #140c22;
  --surface: #22163a;
  --surface-muted: #2e1d4a;
  --surface-strong: #3a2657;
  --paper: #22163a;
  --panel: #22163a;
  --soft: #2e1d4a;
  --text: #f3ebdd;
  --ink: #f3ebdd;
  --muted: #b8accb;
  --text-muted: #b8accb;
  --line: rgba(243, 235, 221, 0.16);
  --control-line: #4b3470;
  --control-line-strong: #6a4d9a;
  --shadow: 0 20px 50px rgba(6, 3, 14, 0.6);
  --shadow-soft: 0 10px 26px rgba(6, 3, 14, 0.45);
  --glow: 0 0 30px rgba(255, 122, 26, 0.25);
  --action-text: #ff8a2a;
  --radius: 20px;

  /* what pack-base.css reads */
  --pk-page: #140c22;
  --pk-surface: #22163a;
  --pk-surface-2: #2e1d4a;
  --pk-surface-3: #3a2657;
  --pk-text: #f3ebdd;
  --pk-text-2: #b8accb;
  --pk-heading: #f3ebdd;
  --pk-line: #3a2657;
  --pk-line-2: #4b3470;
  --pk-primary: var(--st-primary, #ff7a1a);
  --pk-on-primary: #140c22;
  --pk-link: #ff8a2a;
  --pk-danger: #ff7b6b;
  --pk-nav-bg: #0e0818;
  --pk-nav-text: #f3ebdd;
  --pk-nav-muted: #b8accb;
  --pk-nav-line: #2a1b42;
  --pk-nav-hover: #22163a;
  --pk-nav-active-bg: #ff7a1a;
  --pk-nav-active-text: #140c22;
  --pk-bar-bg: #1e1233;
  --pk-bar-text: #f3ebdd;
  --pk-bar-line: #3a2657;
  --pk-foot-bg: #0e0818;
  --pk-foot-line: #2a1b42;
  /* the sign-in page's dark side: a full moon over the hills */
  --pk-brand-bg:
    radial-gradient(circle at 78% 22%, #f6e7b5 0 46px, transparent 48px),
    radial-gradient(circle at 74% 19%, #ebd89b 0 7px, transparent 8px),
    radial-gradient(circle at 82% 27%, #ebd89b 0 5px, transparent 6px),
    radial-gradient(circle at 78% 22%, rgba(246, 231, 181, 0.2), rgba(246, 231, 181, 0) 190px),
    radial-gradient(ellipse 60% 22% at 30% 100%, #0e0818 0 99%, transparent 100%),
    radial-gradient(ellipse 70% 26% at 84% 100%, #0e0818 0 99%, transparent 100%),
    radial-gradient(circle at 20% 105%, rgba(255, 122, 26, 0.22), transparent 55%),
    #1e1233;
  --pk-brand-text: #f3ebdd;
  --pk-brand-muted: #d9cfe8;
  --pk-brand-spark: #b7f04a;
  --pk-eyebrow-bg: #2e1d4a;
  --pk-eyebrow-text: #b7f04a;
  --pk-radius: 20px;
  --pk-radius-sm: 12px;
  --pk-shadow: none;
}

@media screen {
  html[data-style-pack="halloween"] body { background: #140c22; color: #f3ebdd; }
  html[data-style-pack="halloween"] ::selection { background: #ff7a1a; color: #140c22; }

  /* titles are the spooky face (only the big ones); everything smaller is the plain body face */
  html[data-style-pack="halloween"] h1,
  html[data-style-pack="halloween"] h2 {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.02;
  }
  html[data-style-pack="halloween"] h1 { font-size: clamp(40px, 5vw, 62px); }
  html[data-style-pack="halloween"] h3,
  html[data-style-pack="halloween"] h4,
  html[data-style-pack="halloween"] .choice strong,
  html[data-style-pack="halloween"] .price h3,
  html[data-style-pack="halloween"] .profile-section h3,
  html[data-style-pack="halloween"] .character-panel h3,
  html[data-style-pack="halloween"] .story-step-section h3 {
    font-family: var(--font-body, inherit);
    font-weight: 700;
    letter-spacing: -0.005em;
  }
  html[data-style-pack="halloween"] .appbar h2 { font-size: 26px; color: #f3ebdd !important; }

  /* the small label is a purple pill with slime-green capitals */
  html[data-style-pack="halloween"] .eyebrow {
    font-family: var(--font-body, inherit);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 6px 14px !important;
    border: 1px solid #4b3470 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }
  html[data-style-pack="halloween"] .appbar .eyebrow { border-color: #4b3470 !important; background: #2e1d4a !important; color: #b7f04a !important; }

  /* the top bar and the sidebar: the night sky, the current page a pumpkin */
  html[data-style-pack="halloween"] .credits-chip { background: #2e1d4a !important; color: #f3ebdd !important; border: 1px solid #4b3470 !important; }
  html[data-style-pack="halloween"] .credits-chip .credits-count,
  html[data-style-pack="halloween"] .credits-chip strong,
  html[data-style-pack="halloween"] .credits-chip span { color: #f3ebdd !important; }
  html[data-style-pack="halloween"] .credits-add { background: #ff7a1a !important; color: #140c22 !important; }
  html[data-style-pack="halloween"] .appbar .icon-btn { background: #2e1d4a !important; color: #f3ebdd !important; border: 1px solid #4b3470 !important; }
  html[data-style-pack="halloween"] .desktop-brand strong { font-family: var(--font-body, inherit); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
  html[data-style-pack="halloween"] .desktop-nav-item { border-radius: 12px !important; font-weight: 500; }
  html[data-style-pack="halloween"] .desktop-nav-item .nav-icon { background: transparent !important; color: #b7f04a !important; }
  html[data-style-pack="halloween"] .desktop-nav-item.is-active .nav-icon { color: #140c22 !important; }

  /* cards: deep purple panels; the one that is picked or featured glows orange */
  html[data-style-pack="halloween"] .choice:hover,
  html[data-style-pack="halloween"] .price:hover { border-color: #ff7a1a !important; }
  html[data-style-pack="halloween"] .price.featured,
  html[data-style-pack="halloween"] .price.active { border: 2px solid #ff7a1a !important; }
  html[data-style-pack="halloween"] .choice-art { background: #2e1d4a !important; color: #ff8a2a !important; border: 1px solid #4b3470 !important; }
  html[data-style-pack="halloween"] .choice:nth-child(3n + 2) .choice-art { color: #b7f04a !important; }
  html[data-style-pack="halloween"] .choice:nth-child(3n) .choice-art { color: #a98bff !important; }
  html[data-style-pack="halloween"] .choice .choice-art .icon,
  html[data-style-pack="halloween"] .choice .choice-art span { color: inherit; }
  html[data-style-pack="halloween"] .price-figure,
  html[data-style-pack="halloween"] .price-figure b,
  html[data-style-pack="halloween"] .price-figure .money { color: #ffc15e !important; }
  html[data-style-pack="halloween"] .mini-item { border-left: 4px solid #ff7a1a !important; }

  /* buttons: rounded, with a dark-orange ledge under the orange ones that they press into */
  html[data-style-pack="halloween"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked),
  html[data-style-pack="halloween"] .home-primary-action {
    border-radius: 14px !important;
    font-weight: 700;
    box-shadow: 0 6px 0 #9e3f00 !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  html[data-style-pack="halloween"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked):active { transform: translateY(4px); box-shadow: 0 2px 0 #9e3f00 !important; }
  html[data-style-pack="halloween"] .btn-secondary,
  html[data-style-pack="halloween"] .btn-quiet,
  html[data-style-pack="halloween"] .btn-saved {
    background: transparent !important;
    color: #f3ebdd !important;
    border: 2px solid #f3ebdd !important;
    border-radius: 14px !important;
  }
  html[data-style-pack="halloween"] .btn-secondary:hover,
  html[data-style-pack="halloween"] .btn-quiet:hover { background: #2e1d4a !important; }
  html[data-style-pack="halloween"] input:focus,
  html[data-style-pack="halloween"] select:focus,
  html[data-style-pack="halloween"] textarea:focus { outline: 2px solid #ff7a1a; outline-offset: 1px; }
  html[data-style-pack="halloween"] .chip,
  html[data-style-pack="halloween"] .segment,
  html[data-style-pack="halloween"] .lang-filter-btn { border-radius: 999px !important; border: 1px solid #4b3470 !important; }

  /* the sign-in page: the moonlit hills on the left, the form as a purple card */
  html[data-style-pack="halloween"] .auth-brand { border-right: 1px solid #3a2657; }
  html[data-style-pack="halloween"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    font-size: clamp(42px, 4.6vw, 68px);
    line-height: 1;
    letter-spacing: 0.015em;
  }
  html[data-style-pack="halloween"] .auth-panel-wrap { background: #140c22 !important; }
  html[data-style-pack="halloween"] .login-block {
    background: #22163a;
    border: 1px solid #3a2657;
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 0 40px rgba(255, 122, 26, 0.12);
  }
  html[data-style-pack="halloween"] .login-block h1 { font-size: clamp(34px, 3.4vw, 46px); }

  /* the dark page needs dark scrollbars */
  html[data-style-pack="halloween"] ::-webkit-scrollbar { width: 10px; height: 10px; }
  html[data-style-pack="halloween"] ::-webkit-scrollbar-track { background: #140c22; }
  html[data-style-pack="halloween"] ::-webkit-scrollbar-thumb { background: #3a2657; border-radius: 8px; }
}