/* ============================================
   Stack Theme
   Card-based interactive design
   Embraces HyperCard heritage
   ============================================ */

/* Theme activation */
.stack-theme {
  /* Warm cream palette - HyperCard aesthetic */
  --color-bg: #F5F3EF;
  --color-fg: #2C2C2C;
  --color-muted: #6B6B6B;
  --color-faded: #9A9A9A;

  /* Card colors */
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAF9F7;
  --color-border: #E5E2DB;
  --card-shadow: rgba(0, 0, 0, 0.12);

  /* Accent - Warm amber */
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-light: #FEF3C7;

  /* Code - warm undertones */
  --code-bg: #292524;
  --code-fg: #F5F5F4;

  /* Heritage highlight */
  --color-heritage: #B8860B;

  /* Typography - distinctive + readable */
  --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", "Noto Serif CJK JP", serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Noto Sans", "Noto Sans CJK JP", sans-serif;
  --font-mono: "Inconsolata", "Monaco", "Consolas", monospace;

  /* Larger base for readability */
  --text-base: 1.0625rem;

  /* Apply base styles */
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  transition: var(--theme-transition);
}

/* Dark mode variant - explicit toggle */
html.-dark-mode .stack-theme,
.stack-theme.-dark-mode {
  --color-bg: #1C1917;
  --color-fg: #F5F5F4;
  --color-muted: #A8A29E;
  --color-faded: #78716C;
  --color-surface: #292524;
  --color-surface-hover: #44403C;
  --color-border: #44403C;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --color-accent: #FBBF24;
  --color-accent-hover: #FCD34D;
  --color-accent-light: #451A03;
}

/* Dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  .stack-theme:not(.-no-dark-theme):not(html.-light-mode .stack-theme) {
    --color-bg: #1C1917;
    --color-fg: #F5F5F4;
    --color-muted: #A8A29E;
    --color-faded: #78716C;
    --color-surface: #292524;
    --color-surface-hover: #44403C;
    --color-border: #44403C;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --color-accent: #FBBF24;
    --color-accent-hover: #FCD34D;
    --color-accent-light: #451A03;
  }
}

/* ============================================
   Card Components - The Core of Stack Theme
   ============================================ */

.stack-theme .card,
.stack-theme .intro-card,
.stack-theme .feature-card,
.stack-theme #features-list > div {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 6px -1px var(--card-shadow),
    0 2px 4px -2px var(--card-shadow);
  margin-block: var(--space-6);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.stack-theme .card:hover,
.stack-theme .feature-card:hover,
.stack-theme #features-list > div:hover {
  box-shadow:
    0 10px 15px -3px var(--card-shadow),
    0 4px 6px -4px var(--card-shadow);
}

/* HyperCard-style striped title bars */
.stack-theme .card-header,
.stack-theme .title-bar {
  position: relative;
  padding: var(--space-3) var(--space-6);
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-hover);
}

/* Striped lines on either side of title */
.stack-theme .card-header::before,
.stack-theme .card-header::after,
.stack-theme .title-bar::before,
.stack-theme .title-bar::after {
  content: "";
  flex: 1;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border) 0px,
    var(--color-border) 2px,
    transparent 2px,
    transparent 6px
  );
}

.stack-theme .card-header .title,
.stack-theme .title-bar .title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-fg);
  white-space: nowrap;
}

.stack-theme .card-content {
  padding: var(--space-6);
}

/* ============================================
   Layout: Stacked Cards
   ============================================ */

.stack-theme .container {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Hero as a card */
.stack-theme #intro-to-hyperscript {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 6px -1px var(--card-shadow),
    0 2px 4px -2px var(--card-shadow);
  margin-block: var(--space-8);
  padding: var(--space-8);
}

.stack-theme #intro-to-hyperscript h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
  text-align: center;
}

/* Features as expandable cards */
.stack-theme #features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-block: var(--space-4);
}

.stack-theme #features-list h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-block: var(--space-6);
  text-align: center;
}

.stack-theme #features-list > div {
  margin-block: var(--space-3);
  padding: var(--space-6);
}

/* ============================================
   Typography
   ============================================ */

.stack-theme h1,
.stack-theme h2,
.stack-theme h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-fg);
  line-height: var(--leading-tight);
}

.stack-theme h1 { font-size: 2.75rem; }
.stack-theme h2 { font-size: var(--text-2xl); }
.stack-theme h3 { font-size: var(--text-xl); }
.stack-theme h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
}

.stack-theme p {
  line-height: var(--leading-loose);
}

.stack-theme a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.stack-theme a:hover {
  color: var(--color-accent-hover);
}

/* ============================================
   Code Blocks
   ============================================ */

.stack-theme pre,
.stack-theme pre[class*="language-"] {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  border: 2px solid var(--color-border);
}

.stack-theme code,
.stack-theme code[class*="language-"] {
  font-family: var(--font-mono);
}

.stack-theme :not(pre) > code {
  background: var(--color-accent-light);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent-hover);
  font-size: 0.9em;
}

/* ============================================
   Interactive Elements
   ============================================ */

.stack-theme button,
.stack-theme .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: #FFFFFF;
  background: var(--color-accent);
  border: 2px solid var(--color-accent-hover);
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--color-accent-hover);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.stack-theme button:hover,
.stack-theme .btn:hover {
  background: var(--color-accent-hover);
}

.stack-theme button:active,
.stack-theme .btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.stack-theme button:focus-visible,
.stack-theme .btn:focus-visible {
  outline: 3px solid var(--color-accent-light);
  outline-offset: 2px;
}

/* Demo box as card */
.stack-theme .demo-box,
.stack-theme figure {
  background: var(--color-surface);
  border: 2px solid var(--color-heritage);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Navigation
   ============================================ */

.stack-theme .navbar {
  background: var(--color-surface);
  border-block-end: 2px solid var(--color-border);
  box-shadow: 0 2px 4px var(--card-shadow);
}

.stack-theme .navigation a {
  color: var(--color-fg);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}

.stack-theme .navigation a:hover {
  background: var(--color-surface-hover);
  color: var(--color-accent);
}

/* ============================================
   Forms
   ============================================ */

.stack-theme input,
.stack-theme select,
.stack-theme textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-fg);
  transition: border-color 0.15s ease;
}

.stack-theme input:focus,
.stack-theme select:focus,
.stack-theme textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* ============================================
   Warning Box
   ============================================ */

.stack-theme .box.warn {
  background: var(--color-accent-light);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--color-accent-hover);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  .stack-theme {
    --text-base: 1rem;
  }

  .stack-theme h1 {
    font-size: var(--text-3xl);
  }

  .stack-theme .container {
    padding-inline: var(--space-4);
  }

  .stack-theme .card-header::before,
  .stack-theme .card-header::after {
    display: none;
  }
}

/* ============================================
   Print
   ============================================ */

@media print {
  .stack-theme {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }

  .stack-theme .card,
  .stack-theme .feature-card {
    box-shadow: none;
    border: 1px solid #000000;
  }
}