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

/* Signature look: Nocturne (near-black, ember orange, condensed poster capitals, typewriter text). Drawn from the "Nocturne" homepage concept.
   It only applies while the page carries data-style-pack="nocturne" (js/domain/themePreview.js applyPack, server/lib/themePage.js).
   Colours come from the theme through --st-* (see themeOverrideCss in js/data/theme.js); the rest is this file. */

html[data-style-pack="nocturne"] {
  color-scheme: dark;

  /* what the rest of the app reads (css/tokens.css) */
  --app-bg: #0a0a0b;
  --surface: #141416;
  --surface-muted: #1b1b1f;
  --surface-strong: #232327;
  --paper: #141416;
  --panel: #141416;
  --soft: #1b1b1f;
  --text: #ece6da;
  --ink: #ece6da;
  --muted: #9a958c;
  --text-muted: #9a958c;
  --line: rgba(236, 230, 218, 0.14);
  --control-line: #2a2a2e;
  --control-line-strong: #3a3a40;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.45);
  --glow: 0 0 28px rgba(255, 90, 31, 0.22);
  --action-text: #ff8a5c;
  --radius: 2px;

  /* what pack-base.css reads */
  --pk-page: #0a0a0b;
  --pk-surface: #141416;
  --pk-surface-2: #1b1b1f;
  --pk-surface-3: #2a2a2e;
  --pk-text: #ece6da;
  --pk-text-2: #9a958c;
  --pk-heading: #ece6da;
  --pk-line: #2a2a2e;
  --pk-line-2: #3a3a40;
  --pk-primary: var(--st-primary, #d13f08);
  --pk-on-primary: #ffffff;
  --pk-link: #ff8a5c;
  --pk-danger: #ff6b7f;
  --pk-nav-bg: #0a0a0b;
  --pk-nav-text: #ece6da;
  --pk-nav-muted: #6e6a63;
  --pk-nav-line: #1f1f23;
  --pk-nav-hover: #1b1b1f;
  --pk-nav-active-bg: #ece6da;
  --pk-nav-active-text: #0a0a0b;
  --pk-bar-bg: #0a0a0b;
  --pk-bar-text: #ece6da;
  --pk-bar-line: #2a2a2e;
  --pk-brand-bg: radial-gradient(circle at 20% 105%, rgba(255, 90, 31, 0.16), rgba(10, 10, 11, 0) 55%), #0a0a0b;
  --pk-brand-text: #ece6da;
  --pk-brand-muted: #9a958c;
  --pk-brand-spark: #d7ff3a;
  --pk-eyebrow-bg: transparent;
  --pk-eyebrow-text: #ff5a1f;
  --pk-radius: 2px;
  --pk-radius-sm: 2px;
  --pk-shadow: none;
}

@media screen {
  html[data-style-pack="nocturne"] body { background: #0a0a0b; color: #ece6da; font-size: 14px; }
  html[data-style-pack="nocturne"] ::selection { background: #ff5a1f; color: #0a0a0b; }

  /* poster capitals for titles */
  html[data-style-pack="nocturne"] h1 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.95;
    font-size: clamp(38px, 5.2vw, 60px);
  }
  html[data-style-pack="nocturne"] .appbar h2 { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
  html[data-style-pack="nocturne"] .choice strong,
  html[data-style-pack="nocturne"] .price h3,
  html[data-style-pack="nocturne"] .profile-section h3,
  html[data-style-pack="nocturne"] .character-panel h3,
  html[data-style-pack="nocturne"] .story-step-section h3 {
    font-family: var(--font-heading, inherit);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.01em;
    font-size: 1.35em;
    line-height: 1;
  }

  /* small labels are typewriter capitals in [ brackets ], like the slate on a film set */
  html[data-style-pack="nocturne"] .eyebrow {
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
  }
  html[data-style-pack="nocturne"] .page-intro .eyebrow::before,
  html[data-style-pack="nocturne"] main .eyebrow::before { content: "[ "; opacity: 0.7; }
  html[data-style-pack="nocturne"] .page-intro .eyebrow::after,
  html[data-style-pack="nocturne"] main .eyebrow::after { content: " ]"; opacity: 0.7; }
  html[data-style-pack="nocturne"] .appbar .eyebrow { color: #6e6a63 !important; }

  /* the sidebar */
  html[data-style-pack="nocturne"] .desktop-brand strong { letter-spacing: 0.24em; }
  html[data-style-pack="nocturne"] .desktop-nav-label { text-transform: uppercase; letter-spacing: 0.24em; font-size: 10px; }
  html[data-style-pack="nocturne"] .desktop-nav-item { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; border-radius: 0; }
  html[data-style-pack="nocturne"] .desktop-nav-item.is-active { box-shadow: inset 3px 0 0 #ff5a1f !important; }

  /* cards light up on hover; the small figure tiles are plain frames */
  html[data-style-pack="nocturne"] .choice:hover,
  html[data-style-pack="nocturne"] .price:hover { border-color: #ff5a1f !important; }
  html[data-style-pack="nocturne"] .price-figure { color: #ff8a5c !important; }
  html[data-style-pack="nocturne"] .choice-art { color: #ff8a5c !important; }
  html[data-style-pack="nocturne"] .mini-item { border-left: 3px solid var(--pk-primary) !important; }

  /* the sign-in page: the poster on the left, the slate on the right */
  html[data-style-pack="nocturne"] .auth-promise {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.005em;
  }
  html[data-style-pack="nocturne"] .auth-brand { border-right: 1px solid #2a2a2e; }
  html[data-style-pack="nocturne"] .login-block h1 { font-size: clamp(34px, 3.4vw, 46px); }
  html[data-style-pack="nocturne"] .login-block label span { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
  html[data-style-pack="nocturne"] .link-button { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }

  /* the dark page needs dark scrollbars */
  html[data-style-pack="nocturne"] ::-webkit-scrollbar { width: 10px; height: 10px; }
  html[data-style-pack="nocturne"] ::-webkit-scrollbar-track { background: #0a0a0b; }
  html[data-style-pack="nocturne"] ::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 0; }
}