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

/* Signature look: Once Upon (storybook indigo, sunshine yellow and coral, chunky outlines, hard "sticker" shadows, round friendly type).
   Drawn from the "Once Upon" homepage concept. Only applies while the page carries data-style-pack="once-upon". Colours come from the
   theme through --st-*. */

html[data-style-pack="once-upon"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #fff7ea;
  --surface: #ffffff;
  --surface-muted: #fff3da;
  --surface-strong: #ffe9a8;
  --paper: #ffffff;
  --panel: #fff3da;
  --soft: #fff3da;
  --text: #2b2350;
  --ink: #2b2350;
  --muted: #6b6490;
  --text-muted: #6b6490;
  --line: rgba(43, 35, 80, 0.25);
  --control-line: #2b2350;
  --control-line-strong: #2b2350;
  --shadow: 0 6px 0 #2b2350;
  --shadow-soft: 0 5px 0 #2b2350;
  --glow: none;
  --action-text: #3a3272;
  --radius: 24px;

  /* what pack-base.css reads */
  --pk-page: #fff7ea;
  --pk-surface: #ffffff;
  --pk-surface-2: #fff3da;
  --pk-surface-3: #ffe9a8;
  --pk-text: #2b2350;
  --pk-text-2: #6b6490;
  --pk-heading: #2b2350;
  --pk-line: #2b2350;
  --pk-line-2: #2b2350;
  --pk-primary: var(--st-primary, #3a3272);
  --pk-on-primary: #ffffff;
  --pk-link: #3a3272;
  --pk-danger: #c2412d;
  --pk-nav-bg: #2b2350;
  --pk-nav-text: #fff7ea;
  --pk-nav-muted: #cdbdf6;
  --pk-nav-line: rgba(205, 189, 246, 0.25);
  --pk-nav-hover: rgba(255, 247, 234, 0.1);
  --pk-nav-active-bg: #ffc94a;
  --pk-nav-active-text: #2b2350;
  --pk-bar-bg: #cdebf8;
  --pk-bar-text: #2b2350;
  --pk-bar-line: #2b2350;
  --pk-foot-bg: #fff7ea;
  --pk-foot-line: #2b2350;
  --pk-brand-bg: #cdebf8;
  --pk-brand-text: #2b2350;
  --pk-brand-muted: #4a4596;
  --pk-brand-spark: #c2412d;
  --pk-eyebrow-bg: #ffc94a;
  --pk-eyebrow-text: #2b2350;
  --pk-radius: 24px;
  --pk-radius-sm: 16px;
  --pk-shadow: 0 6px 0 #2b2350;
}

@media screen {
  html[data-style-pack="once-upon"] body { background: #fff7ea; color: #2b2350; }
  html[data-style-pack="once-upon"] ::selection { background: #ffc94a; color: #2b2350; }

  /* big, friendly titles */
  html[data-style-pack="once-upon"] h1 {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.02;
    font-size: clamp(36px, 4.6vw, 56px);
    color: #2b2350;
  }
  html[data-style-pack="once-upon"] .appbar h2 { font-weight: 700; font-size: 24px; }

  /* the small label is a yellow sticker */
  html[data-style-pack="once-upon"] .eyebrow {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 4px 14px !important;
    border: 2px solid #2b2350 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  html[data-style-pack="once-upon"] .appbar .eyebrow { border-color: #2b2350 !important; background: #ffc94a !important; color: #2b2350 !important; }

  /* the top bar is the sky, with a chunky line under it */
  html[data-style-pack="once-upon"] .appbar { border-bottom: 4px solid #2b2350; }
  html[data-style-pack="once-upon"] .credits-chip { background: #ffffff !important; color: #2b2350 !important; border: 3px solid #2b2350 !important; }
  html[data-style-pack="once-upon"] .credits-chip .credits-count,
  html[data-style-pack="once-upon"] .credits-chip strong,
  html[data-style-pack="once-upon"] .credits-chip span { color: #2b2350 !important; }
  html[data-style-pack="once-upon"] .credits-add { background: #ffc94a !important; color: #2b2350 !important; border: 3px solid #2b2350 !important; }
  html[data-style-pack="once-upon"] .appbar .icon-btn { background: #ffffff !important; color: #2b2350 !important; border: 3px solid #2b2350 !important; border-radius: 999px !important; }

  /* the sidebar: night sky, round pills, a sun for the current page */
  html[data-style-pack="once-upon"] .desktop-nav { border-right: 4px solid #2b2350; }
  html[data-style-pack="once-upon"] .desktop-brand strong { font-weight: 700; font-size: 22px; }
  html[data-style-pack="once-upon"] .desktop-nav-label { font-weight: 700; letter-spacing: 0.04em; }
  html[data-style-pack="once-upon"] .desktop-nav-item { border-radius: 999px !important; font-weight: 600; font-size: 14px; }
  html[data-style-pack="once-upon"] .desktop-nav-item .nav-icon { border-radius: 999px !important; }
  html[data-style-pack="once-upon"] .desktop-nav-item.is-active { box-shadow: 0 3px 0 #0f0d2e !important; }

  /* cards: white stickers with a chunky outline and a hard shadow, the little tiles in candy colours */
  html[data-style-pack="once-upon"] .choice,
  html[data-style-pack="once-upon"] .profile-section,
  html[data-style-pack="once-upon"] .character-panel,
  html[data-style-pack="once-upon"] .story-step-section,
  html[data-style-pack="once-upon"] .price,
  html[data-style-pack="once-upon"] .mini-item,
  html[data-style-pack="once-upon"] details.faq-item,
  html[data-style-pack="once-upon"] .topup-pack { border-width: 3px !important; border-color: #2b2350 !important; }
  html[data-style-pack="once-upon"] .choice:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #2b2350 !important; }
  html[data-style-pack="once-upon"] .choice-art { border: 3px solid #2b2350 !important; border-radius: 999px !important; color: #2b2350 !important; }
  html[data-style-pack="once-upon"] .choice:nth-child(5n + 1) .choice-art { background: #ffc94a !important; }
  html[data-style-pack="once-upon"] .choice:nth-child(5n + 2) .choice-art { background: #ff8e7c !important; }
  html[data-style-pack="once-upon"] .choice:nth-child(5n + 3) .choice-art { background: #7ed6cb !important; }
  html[data-style-pack="once-upon"] .choice:nth-child(5n + 4) .choice-art { background: #cdbdf6 !important; }
  html[data-style-pack="once-upon"] .choice:nth-child(5n) .choice-art { background: #a9dcf3 !important; }
  html[data-style-pack="once-upon"] .choice strong,
  html[data-style-pack="once-upon"] .price h3 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.3em; }
  html[data-style-pack="once-upon"] .price-figure,
  html[data-style-pack="once-upon"] .price-figure b,
  html[data-style-pack="once-upon"] .price-figure .money { color: #c2412d !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="once-upon"] .price.featured,
  html[data-style-pack="once-upon"] .price.active { background: #fff3da !important; }

  /* buttons: a coral shadow under the indigo ones, a chunky outline on the others */
  html[data-style-pack="once-upon"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked),
  html[data-style-pack="once-upon"] .home-primary-action {
    box-shadow: 0 5px 0 #ff6f59 !important;
    border-radius: 999px !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  html[data-style-pack="once-upon"] .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 #ff6f59 !important; }
  html[data-style-pack="once-upon"] .btn-secondary,
  html[data-style-pack="once-upon"] .btn-quiet,
  html[data-style-pack="once-upon"] .btn-saved {
    background: #ffffff !important;
    color: #2b2350 !important;
    border: 3px solid #2b2350 !important;
    border-radius: 999px !important;
  }
  html[data-style-pack="once-upon"] .btn-secondary:hover,
  html[data-style-pack="once-upon"] .btn-quiet:hover { background: #ffc94a !important; }
  html[data-style-pack="once-upon"] input,
  html[data-style-pack="once-upon"] select,
  html[data-style-pack="once-upon"] textarea { background: #ffffff !important; border: 2px solid #2b2350 !important; border-radius: 16px !important; }
  html[data-style-pack="once-upon"] input:focus,
  html[data-style-pack="once-upon"] select:focus,
  html[data-style-pack="once-upon"] textarea:focus { outline: 3px solid #ff6f59; outline-offset: 2px; }
  html[data-style-pack="once-upon"] .story-build-steps button.is-active,
  html[data-style-pack="once-upon"] .story-build-steps button[aria-current="step"] { background: #ffc94a !important; }
  html[data-style-pack="once-upon"] .chip,
  html[data-style-pack="once-upon"] .segment,
  html[data-style-pack="once-upon"] .lang-filter-btn { border: 2px solid #2b2350 !important; border-radius: 999px !important; font-weight: 700; }

  /* the sign-in page: a sunny sky with clouds, the form as a big sticker */
  html[data-style-pack="once-upon"] .auth-brand {
    background:
      radial-gradient(ellipse 120px 44px at 78% 12%, #ffffff 60%, transparent 62%),
      radial-gradient(ellipse 90px 34px at 88% 16%, #ffffff 60%, transparent 62%),
      radial-gradient(ellipse 150px 52px at 12% 92%, #ffffff 60%, transparent 62%),
      radial-gradient(ellipse 100px 38px at 26% 96%, #ffffff 60%, transparent 62%),
      #cdebf8 !important;
    border-right: 4px solid #2b2350;
  }
  html[data-style-pack="once-upon"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: clamp(36px, 3.8vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: #2b2350 !important;
  }
  html[data-style-pack="once-upon"] .auth-panel-wrap { background: #fff7ea !important; }
  html[data-style-pack="once-upon"] .login-block {
    background: #ffffff;
    border: 3px solid #2b2350;
    border-radius: 32px;
    box-shadow: 0 8px 0 #2b2350;
    padding: 36px 32px;
  }
  html[data-style-pack="once-upon"] .login-block h1 { font-size: clamp(30px, 3vw, 40px); }
  html[data-style-pack="once-upon"] .link-button { font-weight: 700; }
}