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

/* Signature look: Easter (sky blue, egg pastels and plum, thick outlines with hard shadows, round bouncy type, egg-shaped tiles). Drawn from the
   "Easter" seasonal concept of the "Storieze Homepage Concepts" design. A special-occasion look: the owner puts it on the whole site for the
   spring holiday (it is never offered to visitors). It only applies while the page carries data-style-pack="easter". */

html[data-style-pack="easter"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #fbf7ff;
  --surface: #ffffff;
  --surface-muted: #fbf7ff;
  --surface-strong: #efe6ff;
  --paper: #ffffff;
  --panel: #ffffff;
  --soft: #fbf7ff;
  --text: #3b2f63;
  --ink: #3b2f63;
  --muted: #574b82;
  --text-muted: #574b82;
  --line: #cfc4ea;
  --control-line: #3b2f63;
  --control-line-strong: #3b2f63;
  --shadow: 0 6px 0 #3b2f63;
  --shadow-soft: 0 4px 0 #3b2f63;
  --glow: none;
  --action-text: #b8386a;
  --radius: 28px;

  /* what pack-base.css reads */
  --pk-page: #fbf7ff;
  --pk-surface: #ffffff;
  --pk-surface-2: #ffffff;
  --pk-surface-3: #efe6ff;
  --pk-text: #3b2f63;
  --pk-text-2: #574b82;
  --pk-heading: #3b2f63;
  --pk-line: #3b2f63;
  --pk-line-2: #3b2f63;
  --pk-primary: var(--st-primary, #3b2f63);
  --pk-on-primary: #ffffff;
  --pk-link: #3b2f63;
  --pk-danger: #b8386a;
  --pk-nav-bg: #ddebff;
  --pk-nav-text: #3b2f63;
  --pk-nav-muted: #574b82;
  --pk-nav-line: #3b2f63;
  --pk-nav-hover: rgba(59, 47, 99, 0.08);
  --pk-nav-active-bg: #ffe680;
  --pk-nav-active-text: #3b2f63;
  --pk-bar-bg: #ddebff;
  --pk-bar-text: #3b2f63;
  --pk-bar-line: #3b2f63;
  --pk-foot-bg: #ddebff;
  --pk-foot-line: #3b2f63;
  /* the sign-in page's sky: a sun, and green hills with a pink egg on them */
  --pk-brand-bg:
    radial-gradient(circle at 82% 15%, #ffe680 0 56px, transparent 58px),
    radial-gradient(ellipse 22px 30px at 34% 90%, #ffc4d6 0 88%, transparent 100%),
    radial-gradient(ellipse 22px 30px at 52% 94%, #d6c8ff 0 88%, transparent 100%),
    radial-gradient(ellipse 70% 20% at 20% 104%, #7fcc98 0 99%, transparent 100%),
    radial-gradient(ellipse 80% 24% at 85% 106%, #a8e0b8 0 99%, transparent 100%),
    #ddebff;
  --pk-brand-text: #3b2f63;
  --pk-brand-muted: #574b82;
  --pk-brand-spark: #b8386a;
  --pk-eyebrow-bg: #ffe680;
  --pk-eyebrow-text: #3b2f63;
  --pk-radius: 28px;
  --pk-radius-sm: 16px;
  --pk-shadow: 0 6px 0 #3b2f63;
}

@media screen {
  html[data-style-pack="easter"] body { background: #fbf7ff; color: #3b2f63; }
  html[data-style-pack="easter"] ::selection { background: #ffe680; color: #3b2f63; }

  /* big bouncy titles, the last word can be plum */
  html[data-style-pack="easter"] h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.98;
    font-size: clamp(38px, 5vw, 62px);
    color: #3b2f63;
  }
  html[data-style-pack="easter"] .appbar h2 { font-weight: 800; font-size: 26px; }

  /* the small label is a yellow sticker, a little crooked */
  html[data-style-pack="easter"] .eyebrow {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 5px 16px !important;
    border: 3px solid #3b2f63 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transform: rotate(-2deg);
  }
  html[data-style-pack="easter"] .appbar .eyebrow { background: #ffe680 !important; color: #3b2f63 !important; }

  /* the top bar and the sidebar are the sky, with chunky lines */
  html[data-style-pack="easter"] .appbar { border-bottom: 4px solid #3b2f63; }
  html[data-style-pack="easter"] .credits-chip { background: #ffffff !important; color: #3b2f63 !important; border: 3px solid #3b2f63 !important; }
  html[data-style-pack="easter"] .credits-chip .credits-count,
  html[data-style-pack="easter"] .credits-chip strong,
  html[data-style-pack="easter"] .credits-chip span { color: #3b2f63 !important; }
  html[data-style-pack="easter"] .credits-add { background: #ffc4d6 !important; color: #3b2f63 !important; border: 3px solid #3b2f63 !important; }
  html[data-style-pack="easter"] .appbar .icon-btn { background: #ffffff !important; color: #3b2f63 !important; border: 3px solid #3b2f63 !important; border-radius: 999px !important; }
  html[data-style-pack="easter"] .desktop-nav { border-right: 4px solid #3b2f63; }
  html[data-style-pack="easter"] .desktop-brand strong { font-weight: 800; font-size: 24px; }
  html[data-style-pack="easter"] .desktop-nav-label { font-weight: 800; letter-spacing: 0.06em; }
  html[data-style-pack="easter"] .desktop-nav-item { border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="easter"] .desktop-nav-item .nav-icon { background: #ffffff !important; color: #3b2f63 !important; border: 2px solid #3b2f63 !important; border-radius: 999px !important; }
  html[data-style-pack="easter"] .desktop-nav-item.is-active { box-shadow: 0 3px 0 #3b2f63 !important; }

  /* cards: white with a chunky outline and a hard shadow; the little tiles are eggs in pastel colours */
  html[data-style-pack="easter"] .choice,
  html[data-style-pack="easter"] .profile-section,
  html[data-style-pack="easter"] .character-panel,
  html[data-style-pack="easter"] .story-step-section,
  html[data-style-pack="easter"] .price,
  html[data-style-pack="easter"] .mini-item,
  html[data-style-pack="easter"] details.faq-item,
  html[data-style-pack="easter"] .topup-pack { border-width: 3px !important; border-color: #3b2f63 !important; }
  html[data-style-pack="easter"] .choice:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #3b2f63 !important; }
  html[data-style-pack="easter"] .choice-art {
    border: 3px solid #3b2f63 !important;
    border-radius: 50% 50% 46% 46% / 60% 60% 40% 40% !important;
    color: #3b2f63 !important;
  }
  html[data-style-pack="easter"] .choice:nth-child(5n + 1) .choice-art { background: #ffc4d6 !important; }
  html[data-style-pack="easter"] .choice:nth-child(5n + 2) .choice-art { background: #ffe680 !important; }
  html[data-style-pack="easter"] .choice:nth-child(5n + 3) .choice-art { background: #bdebd3 !important; }
  html[data-style-pack="easter"] .choice:nth-child(5n + 4) .choice-art { background: #d6c8ff !important; }
  html[data-style-pack="easter"] .choice:nth-child(5n) .choice-art { background: #ddebff !important; }
  html[data-style-pack="easter"] .choice strong,
  html[data-style-pack="easter"] .price h3,
  html[data-style-pack="easter"] .profile-section h3,
  html[data-style-pack="easter"] .character-panel h3,
  html[data-style-pack="easter"] .story-step-section h3 { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.3em; }
  html[data-style-pack="easter"] .price-figure,
  html[data-style-pack="easter"] .price-figure b,
  html[data-style-pack="easter"] .price-figure .money { color: #b8386a !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="easter"] .price.featured,
  html[data-style-pack="easter"] .price.active { background: #fff8d6 !important; }

  /* buttons: a pink ledge under the plum ones, a chunky outline on the others */
  html[data-style-pack="easter"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked),
  html[data-style-pack="easter"] .home-primary-action {
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 5px 0 #ff8fb1 !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  html[data-style-pack="easter"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked):active { transform: translateY(3px); box-shadow: 0 2px 0 #ff8fb1 !important; }
  html[data-style-pack="easter"] .btn-secondary,
  html[data-style-pack="easter"] .btn-quiet,
  html[data-style-pack="easter"] .btn-saved {
    background: #ffffff !important;
    color: #3b2f63 !important;
    border: 3px solid #3b2f63 !important;
    border-radius: 999px !important;
  }
  html[data-style-pack="easter"] .btn-secondary:hover,
  html[data-style-pack="easter"] .btn-quiet:hover { background: #ffe680 !important; }
  html[data-style-pack="easter"] input,
  html[data-style-pack="easter"] select,
  html[data-style-pack="easter"] textarea { background: #ffffff !important; border: 2px solid #3b2f63 !important; border-radius: 16px !important; }
  html[data-style-pack="easter"] input:focus,
  html[data-style-pack="easter"] select:focus,
  html[data-style-pack="easter"] textarea:focus { outline: 3px solid #ff8fb1; outline-offset: 2px; }
  html[data-style-pack="easter"] .story-build-steps button.is-active,
  html[data-style-pack="easter"] .story-build-steps button[aria-current="step"] { background: #ffe680 !important; }
  html[data-style-pack="easter"] .chip,
  html[data-style-pack="easter"] .segment,
  html[data-style-pack="easter"] .lang-filter-btn { border: 2px solid #3b2f63 !important; border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="easter"] .footer-actions { border-top: 4px solid #3b2f63 !important; }

  /* the sign-in page: the sky and the hills on the left, the form as a big sticker */
  html[data-style-pack="easter"] .auth-brand { border-right: 4px solid #3b2f63; }
  html[data-style-pack="easter"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: #3b2f63 !important;
  }
  html[data-style-pack="easter"] .auth-panel-wrap { background: #fbf7ff !important; }
  html[data-style-pack="easter"] .login-block {
    background: #ffffff;
    border: 4px solid #3b2f63;
    border-radius: 36px;
    box-shadow: 0 8px 0 #3b2f63;
    padding: 36px 32px;
  }
  html[data-style-pack="easter"] .login-block h1 { font-size: clamp(30px, 3vw, 42px); }
  html[data-style-pack="easter"] .link-button { font-weight: 700; }
  html[data-style-pack="easter"] .auth-language-toggle .language-menu-trigger,
  html[data-style-pack="easter"] .auth-language-toggle .language-menu-trigger span { color: #3b2f63 !important; }
  html[data-style-pack="easter"] .choice .choice-art .icon,
  html[data-style-pack="easter"] .choice .choice-art span { color: inherit; }
}