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

/* Signature look: Remembrance Day (paper white, black and poppy red, a quiet serif, hairline rules, square corners, no shadows). Drawn from the
   "Remembrance Day" seasonal concept of the "Storieze Homepage Concepts" design. A special-occasion look: the owner puts it on the whole site
   for 11 November (it is never offered to visitors). It only applies while the page carries data-style-pack="remembrance". */

html[data-style-pack="remembrance"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #f4f1ec;
  --surface: #fbf9f5;
  --surface-muted: #f4f1ec;
  --surface-strong: #e9e4da;
  --paper: #fbf9f5;
  --panel: #fbf9f5;
  --soft: #f4f1ec;
  --text: #1f1f1f;
  --ink: #1f1f1f;
  --muted: #4a4640;
  --text-muted: #4a4640;
  --line: #d8d2c7;
  --control-line: #d8d2c7;
  --control-line-strong: #b8b0a1;
  --shadow: none;
  --shadow-soft: none;
  --glow: none;
  --action-text: #1f1f1f;
  --radius: 0px;

  /* what pack-base.css reads */
  --pk-page: #f4f1ec;
  --pk-surface: #fbf9f5;
  --pk-surface-2: #f4f1ec;
  --pk-surface-3: #e9e4da;
  --pk-text: #1f1f1f;
  --pk-text-2: #4a4640;
  --pk-heading: #1f1f1f;
  --pk-line: #d8d2c7;
  --pk-line-2: #b8b0a1;
  --pk-primary: var(--st-primary, #1f1f1f);
  --pk-on-primary: #f4f1ec;
  --pk-link: #1f1f1f;
  --pk-danger: #a3111a;
  --pk-nav-bg: #1f1f1f;
  --pk-nav-text: #f4f1ec;
  --pk-nav-muted: #cfc9be;
  --pk-nav-line: #4a4640;
  --pk-nav-hover: rgba(244, 241, 236, 0.08);
  --pk-nav-active-bg: #f4f1ec;
  --pk-nav-active-text: #1f1f1f;
  --pk-bar-bg: #f4f1ec;
  --pk-bar-text: #1f1f1f;
  --pk-bar-line: #d8d2c7;
  --pk-foot-bg: #f4f1ec;
  --pk-foot-line: #d8d2c7;
  /* the sign-in page's dark side: a single poppy above the fold, drawn in four petals and a dark heart */
  --pk-brand-bg:
    radial-gradient(circle at 90% 9%, #141414 0 5px, transparent 6px),
    radial-gradient(circle at 90% calc(9% - 11px), #b3121b 0 13px, transparent 14px),
    radial-gradient(circle at calc(90% - 11px) 9%, #c4202a 0 13px, transparent 14px),
    radial-gradient(circle at calc(90% + 11px) 9%, #c4202a 0 13px, transparent 14px),
    radial-gradient(circle at 90% calc(9% + 11px), #a3111a 0 13px, transparent 14px),
    #1f1f1f;
  --pk-brand-text: #f4f1ec;
  --pk-brand-muted: #cfc9be;
  --pk-brand-spark: #ff8b92;
  --pk-eyebrow-bg: transparent;
  --pk-eyebrow-text: #a3111a;
  --pk-radius: 0px;
  --pk-radius-sm: 0px;
  --pk-shadow: none;
}

@media screen {
  html[data-style-pack="remembrance"] body { background: #f4f1ec; color: #1f1f1f; }
  html[data-style-pack="remembrance"] ::selection { background: #1f1f1f; color: #f4f1ec; }

  /* quiet serif titles, a short poppy-red rule under each page title */
  html[data-style-pack="remembrance"] h1 {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.14;
    font-size: clamp(34px, 4.2vw, 52px);
  }
  html[data-style-pack="remembrance"] .page-intro h1::after,
  html[data-style-pack="remembrance"] main > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 16px;
    background: #a3111a;
  }
  html[data-style-pack="remembrance"] .choice strong,
  html[data-style-pack="remembrance"] .price h3,
  html[data-style-pack="remembrance"] .profile-section h3,
  html[data-style-pack="remembrance"] .character-panel h3,
  html[data-style-pack="remembrance"] .story-step-section h3 {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1.2;
  }

  /* small labels are spaced capitals in poppy red */
  html[data-style-pack="remembrance"] .eyebrow {
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
  }
  html[data-style-pack="remembrance"] .appbar .eyebrow { color: #a3111a !important; }

  /* the top bar is paper with a hairline; the sidebar is black with a poppy-red edge on the current page */
  html[data-style-pack="remembrance"] .appbar h2 { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 24px; }
  html[data-style-pack="remembrance"] .credits-chip { background: #fbf9f5 !important; color: #1f1f1f !important; border: 1px solid #b8b0a1 !important; border-radius: 0 !important; }
  html[data-style-pack="remembrance"] .credits-chip .credits-count,
  html[data-style-pack="remembrance"] .credits-chip strong,
  html[data-style-pack="remembrance"] .credits-chip span { color: #1f1f1f !important; }
  html[data-style-pack="remembrance"] .credits-add { border-radius: 0 !important; background: #a3111a !important; color: #ffffff !important; }
  html[data-style-pack="remembrance"] .appbar .icon-btn { background: #fbf9f5 !important; color: #1f1f1f !important; border: 1px solid #b8b0a1 !important; border-radius: 0 !important; }
  html[data-style-pack="remembrance"] .desktop-brand strong { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 22px; }
  html[data-style-pack="remembrance"] .desktop-nav-label { text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; }
  html[data-style-pack="remembrance"] .desktop-nav-item { border-radius: 0 !important; font-size: 14px; }
  html[data-style-pack="remembrance"] .desktop-nav-item.is-active { box-shadow: inset 4px 0 0 #a3111a !important; }
  html[data-style-pack="remembrance"] .desktop-nav-item .nav-icon { background: transparent !important; border: 1px solid rgba(207, 201, 190, 0.5) !important; color: #cfc9be !important; border-radius: 0 !important; }
  html[data-style-pack="remembrance"] .desktop-nav-item.is-active .nav-icon { border-color: #1f1f1f !important; color: #1f1f1f !important; }

  /* cards are plain paper with a hairline; the small tiles are outlined, the prices are serif */
  html[data-style-pack="remembrance"] .choice-art { background: transparent !important; border: 1px solid #1f1f1f !important; color: #1f1f1f !important; border-radius: 0 !important; }
  html[data-style-pack="remembrance"] .choice:hover,
  html[data-style-pack="remembrance"] .price:hover { border-color: #1f1f1f !important; }
  html[data-style-pack="remembrance"] .price.featured,
  html[data-style-pack="remembrance"] .price.active { border-top: 3px solid #a3111a !important; }
  html[data-style-pack="remembrance"] .price-figure,
  html[data-style-pack="remembrance"] .price-figure b,
  html[data-style-pack="remembrance"] .price-figure .money { color: #1f1f1f !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="remembrance"] .mini-item { border-left: 3px solid #a3111a !important; }

  /* buttons: black and square; the smaller ones are plain outlines */
  html[data-style-pack="remembrance"] .btn-secondary,
  html[data-style-pack="remembrance"] .btn-quiet,
  html[data-style-pack="remembrance"] .btn-saved {
    background: transparent !important;
    color: #1f1f1f !important;
    border: 1px solid #1f1f1f !important;
  }
  html[data-style-pack="remembrance"] .btn-secondary:hover,
  html[data-style-pack="remembrance"] .btn-quiet:hover { background: #1f1f1f !important; color: #f4f1ec !important; }
  html[data-style-pack="remembrance"] input,
  html[data-style-pack="remembrance"] select,
  html[data-style-pack="remembrance"] textarea { background: #fbf9f5 !important; border-color: #b8b0a1 !important; }

  /* the sign-in page: black with the poppy on the left, paper on the right */
  html[data-style-pack="remembrance"] .auth-brand { border-right: 1px solid #4a4640; }
  html[data-style-pack="remembrance"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 400;
    font-size: clamp(34px, 3.8vw, 52px);
    line-height: 1.14;
    color: #f4f1ec !important;
  }
  html[data-style-pack="remembrance"] .auth-panel-wrap { background: #f4f1ec !important; }
  html[data-style-pack="remembrance"] .login-block { background: #fbf9f5; border: 1px solid #d8d2c7; padding: 40px 36px; }
  html[data-style-pack="remembrance"] .login-block h1 { font-size: clamp(28px, 3vw, 38px); }
  html[data-style-pack="remembrance"] .login-block h1::after { display: none; }
  html[data-style-pack="remembrance"] .link-button { text-decoration: underline; }
  html[data-style-pack="remembrance"] .auth-language-toggle .language-menu-trigger,
  html[data-style-pack="remembrance"] .auth-language-toggle .language-menu-trigger span { color: #1f1f1f !important; }
  html[data-style-pack="remembrance"] .choice .choice-art .icon,
  html[data-style-pack="remembrance"] .choice .choice-art span { color: inherit; }
}