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

/* Signature look: Heirloom (navy, cream and bronze, refined serif, hairline and double rules, hard paper shadows). Drawn from the "Heirloom"
   homepage concept. Only applies while the page carries data-style-pack="heirloom". Colours come from the theme through --st-*. */

html[data-style-pack="heirloom"] {
  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #f6f2e9;
  --surface: #fffdf8;
  --surface-muted: #fbf9f4;
  --surface-strong: #efe9dc;
  --paper: #fffdf8;
  --panel: #fbf9f4;
  --soft: #fbf9f4;
  --text: #22252b;
  --ink: #1c2b45;
  --muted: #5a5f68;
  --text-muted: #5a5f68;
  --line: #d9d2c3;
  --control-line: #d9d2c3;
  --control-line-strong: #b9b09d;
  --shadow: 8px 8px 0 #e7e0d0;
  --shadow-soft: 5px 5px 0 #e7e0d0;
  --glow: none;
  --action-text: #1c2b45;
  --radius: 0px;

  /* what pack-base.css reads */
  --pk-page: #f6f2e9;
  --pk-surface: #fffdf8;
  --pk-surface-2: #fbf9f4;
  --pk-surface-3: #efe9dc;
  --pk-text: #22252b;
  --pk-text-2: #5a5f68;
  --pk-heading: #1c2b45;
  --pk-line: #d9d2c3;
  --pk-line-2: #b9b09d;
  --pk-primary: var(--st-primary, #1c2b45);
  --pk-on-primary: #f6f2e9;
  --pk-link: #1c2b45;
  --pk-danger: #7a2e2e;
  --pk-nav-bg: #1c2b45;
  --pk-nav-text: #f6f2e9;
  --pk-nav-muted: #d8c193;
  --pk-nav-line: rgba(216, 193, 147, 0.28);
  --pk-nav-hover: rgba(246, 242, 233, 0.08);
  --pk-nav-active-bg: #f6f2e9;
  --pk-nav-active-text: #1c2b45;
  --pk-bar-bg: #f6f2e9;
  --pk-bar-text: #1c2b45;
  --pk-bar-line: #1c2b45;
  --pk-foot-bg: #f6f2e9;
  --pk-foot-line: #1c2b45;
  --pk-brand-bg: #1c2b45;
  --pk-brand-text: #f6f2e9;
  --pk-brand-muted: #d9d2c3;
  --pk-brand-spark: #d8c193;
  --pk-eyebrow-bg: transparent;
  --pk-eyebrow-text: #7a5c2e;
  --pk-radius: 0px;
  --pk-radius-sm: 0px;
  --pk-shadow: 6px 6px 0 #e7e0d0;
}

@media screen {
  html[data-style-pack="heirloom"] body { background: #f6f2e9; color: #22252b; }
  html[data-style-pack="heirloom"] ::selection { background: #1c2b45; color: #f6f2e9; }

  /* headings: refined serif, a fine bronze rule under each page title */
  html[data-style-pack="heirloom"] h1 {
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.02;
    font-size: clamp(38px, 4.6vw, 56px);
    color: #1c2b45;
  }
  html[data-style-pack="heirloom"] .page-intro h1::after,
  html[data-style-pack="heirloom"] main > h1::after {
    content: "";
    display: block;
    width: 72px;
    margin-top: 14px;
    border-top: 1px solid #a8894f;
    border-bottom: 1px solid #a8894f;
    height: 3px;
  }
  html[data-style-pack="heirloom"] .choice strong,
  html[data-style-pack="heirloom"] .price h3,
  html[data-style-pack="heirloom"] .profile-section h3,
  html[data-style-pack="heirloom"] .character-panel h3,
  html[data-style-pack="heirloom"] .story-step-section h3 {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    font-size: 1.45em;
    line-height: 1.1;
  }

  /* small labels: spaced capitals in bronze */
  html[data-style-pack="heirloom"] .eyebrow {
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
  }
  html[data-style-pack="heirloom"] .appbar .eyebrow { color: #7a5c2e !important; }

  /* the masthead: a cream bar with a double rule under it, the title in serif */
  html[data-style-pack="heirloom"] .appbar { border-bottom: 3px double #1c2b45; }
  html[data-style-pack="heirloom"] .appbar h2 { font-family: var(--font-heading, inherit); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; }
  html[data-style-pack="heirloom"] .credits-chip { background: #fffdf8 !important; color: #1c2b45 !important; border: 1px solid #b9b09d !important; border-radius: 0 !important; }
  html[data-style-pack="heirloom"] .credits-chip .credits-count,
  html[data-style-pack="heirloom"] .credits-chip strong,
  html[data-style-pack="heirloom"] .credits-chip span { color: #1c2b45 !important; }
  html[data-style-pack="heirloom"] .credits-add { border-radius: 0 !important; background: #a8894f !important; color: #f6f2e9 !important; }
  html[data-style-pack="heirloom"] .appbar .icon-btn { background: #fffdf8 !important; color: #1c2b45 !important; border: 1px solid #b9b09d !important; border-radius: 0 !important; }

  /* the sidebar: a navy contents page with bronze small capitals */
  html[data-style-pack="heirloom"] .desktop-brand strong { font-family: var(--font-heading, inherit); font-size: 22px; letter-spacing: 0.04em; }
  html[data-style-pack="heirloom"] .desktop-nav-label { text-transform: uppercase; letter-spacing: 0.24em; font-size: 10px; }
  html[data-style-pack="heirloom"] .desktop-nav-item { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; }
  html[data-style-pack="heirloom"] .desktop-nav-item.is-active { box-shadow: inset 3px 0 0 #a8894f !important; }
  html[data-style-pack="heirloom"] .desktop-nav-item .nav-icon { background: transparent !important; border: 1px solid rgba(216, 193, 147, 0.45) !important; color: #d8c193 !important; }
  html[data-style-pack="heirloom"] .desktop-nav-item.is-active .nav-icon { border-color: #1c2b45 !important; color: #1c2b45 !important; }

  /* cards: white paper, a hairline border, a hard shadow like a card on a desk */
  html[data-style-pack="heirloom"] .choice-art {
    background: transparent !important;
    border: 1px solid #a8894f !important;
    color: #7a5c2e !important;
    border-radius: 0 !important;
  }
  html[data-style-pack="heirloom"] .choice:hover,
  html[data-style-pack="heirloom"] .price:hover { border-color: #1c2b45 !important; }
  html[data-style-pack="heirloom"] .price-figure,
  html[data-style-pack="heirloom"] .price-figure b,
  html[data-style-pack="heirloom"] .price-figure .money { color: #1c2b45 !important; font-family: var(--font-heading, inherit); }
  html[data-style-pack="heirloom"] .mini-item,
  html[data-style-pack="heirloom"] .profile-section,
  html[data-style-pack="heirloom"] .character-panel { box-shadow: 4px 4px 0 #e7e0d0 !important; }

  /* the smaller buttons are plain outlines, like the concept's */
  html[data-style-pack="heirloom"] .btn-secondary,
  html[data-style-pack="heirloom"] .btn-quiet {
    background: transparent !important;
    color: #1c2b45 !important;
    border: 1px solid #1c2b45 !important;
  }
  html[data-style-pack="heirloom"] .btn-secondary:hover,
  html[data-style-pack="heirloom"] .btn-quiet:hover { background: #1c2b45 !important; color: #f6f2e9 !important; }
  html[data-style-pack="heirloom"] input,
  html[data-style-pack="heirloom"] select,
  html[data-style-pack="heirloom"] textarea { background: #fbf9f4 !important; border-color: #b9b09d !important; }

  /* the sign-in page: a navy page on the left with a gold rule, the form as a card on paper on the right */
  html[data-style-pack="heirloom"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.02;
    color: #f6f2e9 !important;
  }
  html[data-style-pack="heirloom"] .auth-brand { border-right: 3px double #a8894f; }
  html[data-style-pack="heirloom"] .auth-panel-wrap { background: #f6f2e9 !important; }
  html[data-style-pack="heirloom"] .login-block {
    background: #ffffff;
    border: 1px solid #d9d2c3;
    box-shadow: 8px 8px 0 #e7e0d0;
    padding: 40px 36px;
  }
  html[data-style-pack="heirloom"] .login-block h1 { font-size: clamp(30px, 3vw, 40px); }
  html[data-style-pack="heirloom"] .login-block h1::after { display: none; }
  html[data-style-pack="heirloom"] .login-block label span { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600; }
  html[data-style-pack="heirloom"] .link-button { text-decoration: underline; }
}