/* ============================================
   Clarity Theme
   Professional developer-first design
   Inspired by Vercel/Geist and Zed
   ============================================ */

/* Theme activation */
.clarity-theme {
  /* Core palette - High contrast, accessibility-first */
  --color-bg: #FAFAFA;
  --color-fg: #171717;
  --color-muted: #525252;
  --color-faded: #A3A3A3;

  /* Accent - Professional indigo */
  --color-accent: #4F46E5;
  --color-accent-hover: #4338CA;
  --color-accent-light: #EEF2FF;

  /* Surfaces */
  --color-surface: #FFFFFF;
  --color-surface-hover: #F5F5F5;
  --color-border: #E5E5E5;

  /* Code - Always dark for consistency */
  --code-bg: #1E1E1E;
  --code-fg: #D4D4D4;

  /* Heritage accent - HyperCard nod */
  --color-heritage: #996633;

  /* Status colors */
  --color-ok: #15803D;
  --color-warn: #A16207;
  --color-warn-bg: #FEF3C7;
  --color-bad: #DC2626;

  /* Typography - i18n optimized */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Helvetica Neue", "Noto Sans CJK JP", "Noto Sans CJK SC", "Noto Sans CJK KR", "Noto Sans Arabic", sans-serif;
  --font-mono: "Inconsolata", "SF Mono", "Monaco", "Consolas", "Noto Sans Mono CJK JP", monospace;

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

/* Dark mode variant - explicit toggle */
html.-dark-mode .clarity-theme,
.clarity-theme.-dark-mode {
  --color-bg: #0A0A0A;
  --color-fg: #FAFAFA;
  --color-muted: #A3A3A3;
  --color-faded: #737373;
  --color-surface: #171717;
  --color-surface-hover: #262626;
  --color-border: #404040;
  --color-accent: #818CF8;
  --color-accent-hover: #A5B4FC;
  --color-accent-light: #1E1B4B;
}

/* Dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  .clarity-theme:not(.-no-dark-theme):not(html.-light-mode .clarity-theme) {
    --color-bg: #0A0A0A;
    --color-fg: #FAFAFA;
    --color-muted: #A3A3A3;
    --color-faded: #737373;
    --color-surface: #171717;
    --color-surface-hover: #262626;
    --color-border: #404040;
    --color-accent: #818CF8;
    --color-accent-hover: #A5B4FC;
    --color-accent-light: #1E1B4B;
  }
}

/* ============================================
   Layout Components
   ============================================ */

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

/* Hero section */
.clarity-theme .hero-section,
.clarity-theme #intro-to-hyperscript {
  max-inline-size: var(--container-lg);
  margin-inline: auto;
  padding-block: var(--space-12);
  text-align: center;
}

.clarity-theme .hero-section h1,
.clarity-theme #intro-to-hyperscript h1 {
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
  color: var(--color-fg);
}

.clarity-theme .hero-section p,
.clarity-theme #intro-to-hyperscript > div > p {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-inline-size: 40rem;
  margin-inline: auto;
}

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

.clarity-theme #features-list h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  text-align: center;
  margin-block: var(--space-6);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.clarity-theme #features-list > div {
  padding: var(--space-6);
  margin-block: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}

.clarity-theme #features-list > div:hover {
  border-color: var(--color-accent);
}

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

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

.clarity-theme h1 { font-size: var(--text-4xl); }
.clarity-theme h2 { font-size: var(--text-2xl); }
.clarity-theme h3 { font-size: var(--text-xl); }
.clarity-theme h4 { font-size: var(--text-lg); }

.clarity-theme p {
  color: var(--color-fg);
  line-height: var(--leading-relaxed);
}

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

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

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

.clarity-theme pre,
.clarity-theme pre[class*="language-"] {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: 1.7;
}

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

.clarity-theme :not(pre) > code {
  background: var(--color-surface-hover);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  color: var(--color-fg);
}

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

.clarity-theme button,
.clarity-theme .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #FFFFFF;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

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

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

/* Heritage demo box - subtle HyperCard nod */
.clarity-theme .demo-box,
.clarity-theme figure {
  border: 2px dotted var(--color-heritage);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface);
}

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

.clarity-theme .navbar {
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.clarity-theme .navigation a {
  color: var(--color-fg);
  text-decoration: none;
  font-weight: 500;
}

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

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

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

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

/* ============================================
   Utility: Warning/Status boxes
   ============================================ */

.clarity-theme .box.warn {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--color-warn);
}

/* ============================================
   Social Proof Bar (for landing page)
   ============================================ */

.clarity-theme .social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.clarity-theme .social-proof a {
  color: var(--color-muted);
}

.clarity-theme .social-proof a:hover {
  color: var(--color-accent);
}

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

@media (max-width: 768px) {
  .clarity-theme .container {
    padding-inline: var(--space-4);
  }

  .clarity-theme .hero-section h1,
  .clarity-theme #intro-to-hyperscript h1 {
    font-size: var(--text-3xl);
  }

  .clarity-theme .social-proof {
    flex-direction: column;
    gap: var(--space-4);
  }
}

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

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

  .clarity-theme pre {
    background: #f5f5f5;
    color: #000000;
  }
}