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

/* Signature look: Día de Muertos (deep purple, marigold and magenta on warm cream, a bold display serif, round pills, a scalloped edge under the top bar).
   Drawn from the "Día de Muertos" seasonal concept of the "Storieze Homepage Concepts" design. An ordinary ready-made style: offered to visitors
   like the others, and the owner can put it on the whole site for 1 to 2 November. It only applies while the page carries data-style-pack="dia-de-muertos". */

html[data-style-pack="dia-de-muertos"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #fff4e0;
  --surface: #ffffff;
  --surface-muted: #fffaf0;
  --surface-strong: #f6e2bf;
  --paper: #ffffff;
  --panel: #ffffff;
  --soft: #fffaf0;
  --text: #2a1245;
  --ink: #2a1245;
  --muted: #4e3a68;
  --text-muted: #4e3a68;
  --line: #ecd9b8;
  --control-line: #dcc7a0;
  --control-line-strong: #c4a878;
  --shadow: 0 10px 26px rgba(42, 18, 69, 0.1);
  --shadow-soft: 0 6px 16px rgba(42, 18, 69, 0.08);
  --glow: none;
  --action-text: #c21f66;
  --radius: 24px;

  /* what pack-base.css reads */
  --pk-page: #fff4e0;
  --pk-surface: #ffffff;
  --pk-surface-2: #fffaf0;
  --pk-surface-3: #f6e2bf;
  --pk-text: #2a1245;
  --pk-text-2: #4e3a68;
  --pk-heading: #2a1245;
  --pk-line: #ecd9b8;
  --pk-line-2: #d9c6a8;
  --pk-primary: var(--st-primary, #c21f66);
  --pk-on-primary: #ffffff;
  --pk-link: #2a1245;
  --pk-danger: #c21f66;
  --pk-nav-bg: #2a1245;
  --pk-nav-text: #fff4e0;
  --pk-nav-muted: #d9c6e8;
  --pk-nav-line: rgba(255, 182, 39, 0.32);
  --pk-nav-hover: rgba(255, 244, 224, 0.09);
  --pk-nav-active-bg: #ffb627;
  --pk-nav-active-text: #2a1245;
  --pk-bar-bg: #2a1245;
  --pk-bar-text: #fff4e0;
  --pk-bar-line: #2a1245;
  --pk-foot-bg: #2a1245;
  --pk-foot-line: rgba(255, 182, 39, 0.4);
  /* the sign-in page's purple side: drifting marigold petals and a warm glow */
  --pk-brand-bg:
    radial-gradient(circle at 7% 9%, rgba(255, 244, 224, 0.75) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 14%, rgba(255, 244, 224, 0.6) 0 4px, transparent 5px),
    radial-gradient(circle at 60% 6%, rgba(255, 244, 224, 0.7) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 30%, rgba(255, 182, 39, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 95% 47%, rgba(255, 244, 224, 0.6) 0 3px, transparent 4px),
    radial-gradient(circle at 5% 33%, rgba(255, 244, 224, 0.5) 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 30% 105%, rgba(255, 182, 39, 0.25), transparent 60%),
    #2a1245;
  --pk-brand-text: #fff4e0;
  --pk-brand-muted: #d9c6e8;
  --pk-brand-spark: #ffc85a;
  --pk-eyebrow-bg: transparent;
  --pk-eyebrow-text: #c21f66;
  --pk-radius: 24px;
  --pk-radius-sm: 14px;
  --pk-shadow: none;
}

@media screen {
  html[data-style-pack="dia-de-muertos"] body { background: #fff4e0; color: #2a1245; }
  html[data-style-pack="dia-de-muertos"] ::selection { background: #c21f66; color: #fff4e0; }

  /* rich display serif titles */
  html[data-style-pack="dia-de-muertos"] h1 {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.02;
    font-size: clamp(38px, 4.8vw, 58px);
  }
  html[data-style-pack="dia-de-muertos"] .choice strong,
  html[data-style-pack="dia-de-muertos"] .price h3,
  html[data-style-pack="dia-de-muertos"] .profile-section h3,
  html[data-style-pack="dia-de-muertos"] .character-panel h3,
  html[data-style-pack="dia-de-muertos"] .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 magenta */
  html[data-style-pack="dia-de-muertos"] .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="dia-de-muertos"] .appbar .eyebrow { color: #ffc85a !important; }

  /* the top bar is deep purple, with a scalloped edge of cream along its bottom */
  html[data-style-pack="dia-de-muertos"] .appbar {
    border-bottom: 0;
    padding-bottom: 12px;
    background: radial-gradient(circle at 15px 12px, #fff4e0 0 14px, transparent 15px) left bottom / 30px 12px repeat-x, #2a1245 !important;
  }
  html[data-style-pack="dia-de-muertos"] .appbar h2 { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 26px; }
  html[data-style-pack="dia-de-muertos"] .credits-chip { background: rgba(255, 244, 224, 0.12) !important; color: #fff4e0 !important; border: 1px solid rgba(255, 182, 39, 0.6) !important; }
  html[data-style-pack="dia-de-muertos"] .credits-chip .credits-count,
  html[data-style-pack="dia-de-muertos"] .credits-chip strong,
  html[data-style-pack="dia-de-muertos"] .credits-chip span { color: #fff4e0 !important; }
  html[data-style-pack="dia-de-muertos"] .credits-add { background: #ffb627 !important; color: #2a1245 !important; }
  html[data-style-pack="dia-de-muertos"] .appbar .icon-btn { background: rgba(255, 244, 224, 0.12) !important; color: #fff4e0 !important; border: 1px solid rgba(255, 182, 39, 0.6) !important; }

  /* the sidebar: deep purple with a scatter of petals, the current page in marigold */
  html[data-style-pack="dia-de-muertos"] .desktop-nav {
    background:
      radial-gradient(circle at 24% 70%, rgba(255, 244, 224, 0.6) 0 2px, transparent 3px),
      radial-gradient(circle at 78% 76%, rgba(255, 244, 224, 0.5) 0 2.5px, transparent 3.5px),
      radial-gradient(circle at 40% 84%, rgba(255, 182, 39, 0.8) 0 2.5px, transparent 3.5px),
      radial-gradient(circle at 66% 66%, rgba(255, 244, 224, 0.5) 0 2px, transparent 3px),
      radial-gradient(circle at 18% 90%, rgba(255, 244, 224, 0.55) 0 2px, transparent 3px),
      #2a1245 !important;
  }
  html[data-style-pack="dia-de-muertos"] .desktop-brand strong { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 26px; }
  html[data-style-pack="dia-de-muertos"] .desktop-nav-item { border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="dia-de-muertos"] .desktop-nav-item .nav-icon { background: transparent !important; color: #ffc85a !important; border-radius: 999px !important; }
  html[data-style-pack="dia-de-muertos"] .desktop-nav-item.is-active .nav-icon { color: #2a1245 !important; }
  html[data-style-pack="dia-de-muertos"] .desktop-nav-label { color: #ffc85a !important; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }

  /* cards are cream-white with a soft border; the little tiles are papel picado in magenta, teal and marigold */
  html[data-style-pack="dia-de-muertos"] .choice-art { border: 0 !important; border-radius: 999px !important; color: #fff4e0 !important; }
  html[data-style-pack="dia-de-muertos"] .choice:nth-child(3n + 1) .choice-art { background: #c21f66 !important; }
  html[data-style-pack="dia-de-muertos"] .choice:nth-child(3n + 2) .choice-art { background: #0fa3a3 !important; }
  html[data-style-pack="dia-de-muertos"] .choice:nth-child(3n) .choice-art { background: #ffb627 !important; color: #2a1245 !important; }
  html[data-style-pack="dia-de-muertos"] .choice .choice-art .icon,
  html[data-style-pack="dia-de-muertos"] .choice .choice-art span { color: inherit; }
  html[data-style-pack="dia-de-muertos"] .choice:hover,
  html[data-style-pack="dia-de-muertos"] .price:hover { border-color: #c21f66 !important; }
  html[data-style-pack="dia-de-muertos"] .price.featured,
  html[data-style-pack="dia-de-muertos"] .price.active { background: #f6e2bf !important; border: 2px solid #c21f66 !important; }
  html[data-style-pack="dia-de-muertos"] .price-figure,
  html[data-style-pack="dia-de-muertos"] .price-figure b,
  html[data-style-pack="dia-de-muertos"] .price-figure .money { color: #c21f66 !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="dia-de-muertos"] .mini-item { border-left: 5px solid #ffb627 !important; }

  /* buttons: round magenta pills; the smaller ones are purple outlines */
  html[data-style-pack="dia-de-muertos"] .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-saved):not(.btn-warm):not(.btn-locked),
  html[data-style-pack="dia-de-muertos"] .home-primary-action { border-radius: 999px !important; font-weight: 800; }
  html[data-style-pack="dia-de-muertos"] .btn-secondary,
  html[data-style-pack="dia-de-muertos"] .btn-quiet,
  html[data-style-pack="dia-de-muertos"] .btn-saved {
    background: transparent !important;
    color: #2a1245 !important;
    border: 2px solid #2a1245 !important;
    border-radius: 999px !important;
  }
  html[data-style-pack="dia-de-muertos"] .btn-secondary:hover,
  html[data-style-pack="dia-de-muertos"] .btn-quiet:hover { background: #2a1245 !important; color: #fff4e0 !important; }
  html[data-style-pack="dia-de-muertos"] input,
  html[data-style-pack="dia-de-muertos"] select,
  html[data-style-pack="dia-de-muertos"] textarea { background: #fffaf0 !important; border-color: #d9c6a8 !important; border-radius: 14px !important; }
  html[data-style-pack="dia-de-muertos"] input:focus,
  html[data-style-pack="dia-de-muertos"] select:focus,
  html[data-style-pack="dia-de-muertos"] textarea:focus { outline: 2px solid #c21f66; outline-offset: 1px; }
  html[data-style-pack="dia-de-muertos"] .chip,
  html[data-style-pack="dia-de-muertos"] .segment,
  html[data-style-pack="dia-de-muertos"] .lang-filter-btn { border-radius: 999px !important; font-weight: 700; }
  html[data-style-pack="dia-de-muertos"] .footer-actions { border-top: 3px solid #ffb627 !important; }
  /* the purple footer: its quiet buttons are cream */
  html[data-style-pack="dia-de-muertos"] .footer-actions .btn-secondary,
  html[data-style-pack="dia-de-muertos"] .footer-actions .btn-quiet {
    color: #fff4e0 !important;
    border-color: #fff4e0 !important;
  }
  html[data-style-pack="dia-de-muertos"] .footer-actions .btn-secondary:hover,
  html[data-style-pack="dia-de-muertos"] .footer-actions .btn-quiet:hover { background: #fff4e0 !important; color: #2a1245 !important; }

  /* the sign-in page: purple on the left, the form as a cream card */
  html[data-style-pack="dia-de-muertos"] .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="dia-de-muertos"] .auth-panel-wrap { background: #fff4e0 !important; }
  html[data-style-pack="dia-de-muertos"] .login-block {
    background: #ffffff;
    border: 1px solid #ecd9b8;
    border-radius: 28px;
    padding: 38px 34px;
    box-shadow: 0 12px 30px rgba(42, 18, 69, 0.1);
  }
  html[data-style-pack="dia-de-muertos"] .login-block h1 { font-size: clamp(30px, 3vw, 40px); }
  html[data-style-pack="dia-de-muertos"] .auth-language-toggle .language-menu-trigger,
  html[data-style-pack="dia-de-muertos"] .auth-language-toggle .language-menu-trigger span { color: #2a1245 !important; }
}