/* HyperCard Theme for Hyperscript */
/* Based on Apple HyperCard (1987) — extends Pure Mac '84 with animations */

/* Contrast Audit (WCAG 2.1)
   Light mode:
     --fg (#000000) on --bg (#FAFAF5): ~19.8:1 → AAA ✓
     --faded-fg (#666666) on --bg (#FAFAF5): ~5.5:1 → AA ✓
     --accent (#0000FF) on --bg (#FAFAF5): ~8.4:1 → AAA ✓
     --code-fg (#1A1A1A) on --code-bg (#F5F5F0): ~14.5:1 → AAA ✓
   Dark mode:
     --fg (#E0E0E0) on --bg (#1A1A1A): ~12:1 → AAA ✓
     --faded-fg (#888888) on --bg (#1A1A1A): ~5:1 → AA ✓
     --accent (#88BBFF) on --bg (#1A1A1A): ~8:1 → AAA ✓
   Note: Monochrome base with warm off-white card background.
   Verified: 2026-01-31 */

@font-face {
  font-family: 'ChicagoFLF';
  src: url('/fonts/ChicagoFLF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monaco';
  src: url('/fonts/monaco.woff2') format('woff2'),
       url('/fonts/monaco.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root.hypercard-theme {
  /* Typography - Classic Mac inspired but readable */
  --main-font: 'Geneva', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --secondary-font: 'ChicagoFLF', 'Chicago', 'Geneva', -apple-system, system-ui, sans-serif;
  --display-font: 'ChicagoFLF', 'Chicago', 'Geneva', -apple-system, system-ui, sans-serif;
  --heading-font: 'ChicagoFLF', 'Chicago', 'Geneva', -apple-system, system-ui, sans-serif;
  --mono-font: 'Inconsolata', 'Monaco', 'SF Mono', 'Consolas', monospace;

  /* Code block colors */
  --code-bg: #F5F5F0;
  --code-fg: #1A1A1A;
  --code-comment: #6A737D;
  --code-keyword: #D73A49;
  --code-string: #032F62;
  --code-function: #6F42C1;
  --code-number: #005CC5;

  --rhythm: 1.5rem;
  --line-length: 48rem;
  --border-radius: 0;
  --density: 1.5;
  --prose-line-height: 1.5;

  /* HyperCard card palette — warm off-white like actual HyperCard cards */
  --fg: #000000;
  --bg: #FAFAF5;
  --muted-fg: #000000;
  --faded-fg: #666666;
  --graphical-fg: #000000;

  --box-bg: #FFFFFF;
  --interactive-bg: #000000;

  --accent: #0000FF;
  --muted-accent: #000088;

  /* Status colors */
  --plain-fg: #000000;
  --plain-bg: #FAFAF5;
  --info-fg: #FFFFFF;
  --info-bg: #000000;
  --ok-fg: #000000;
  --ok-bg: #FAFAF5;
  --bad-fg: #FFFFFF;
  --bad-bg: #000000;
  --warn-fg: #000000;
  --warn-bg: #FFFF00;

  /* Canonical color aliases */
  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-muted: var(--muted-fg);
  --color-faded: var(--faded-fg);
  --color-accent: var(--accent);
  --color-accent-hover: var(--muted-accent);
  --color-surface: var(--box-bg);
  --color-surface-hover: var(--interactive-bg);
  --color-border: var(--fg);

  /* Layer 0: OKLCH Primitives */
  --lch-accent-l: 37%;  --lch-accent-c: 0.31;  --lch-accent-h: 264;
  --polarity: 1;

  /* Layer 3: Component Tokens */
  --nav-bg: var(--bg);
  --nav-border: var(--fg);
  --card-bg: var(--box-bg);
  --card-border: var(--fg);
  --card-radius: 0;
  --btn-bg: var(--bg);
  --btn-fg: var(--fg);
  --btn-radius: 0;
  --input-bg: var(--bg);
  --input-border: var(--fg);
  --input-focus-ring: var(--accent);

  /* Shared spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* Dark mode - softened inversion */
:root.hypercard-theme.-dark-theme {
  --fg: #E0E0E0;
  --bg: #1A1A1A;
  --box-bg: #1A1A1A;
  --interactive-bg: #E0E0E0;
  --accent: #88BBFF;
  --muted-accent: #6699CC;
  --faded-fg: #888888;

  --code-bg: #2D2D2D;
  --code-fg: #E0E0E0;
  --code-comment: #999999;
  --code-keyword: #F97583;
  --code-string: #9ECBFF;
  --code-function: #B392F0;
  --code-number: #79B8FF;

  --plain-fg: #E0E0E0;
  --plain-bg: #1A1A1A;
  --info-fg: #1A1A1A;
  --info-bg: #E0E0E0;
  --ok-fg: #E0E0E0;
  --ok-bg: #1A1A1A;
  --bad-fg: #1A1A1A;
  --bad-bg: #E0E0E0;
  --warn-fg: #1A1A1A;
  --warn-bg: #FFDD44;

  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-muted: var(--faded-fg);
  --color-surface: var(--box-bg);
  --color-accent: var(--accent);
  --color-accent-hover: var(--muted-accent);
  --color-border: var(--fg);
}

/* Dark mode - explicit toggle */
html.-dark-mode .hypercard-theme,
.hypercard-theme.-dark-mode {
  --fg: #E0E0E0;
  --bg: #1A1A1A;
  --box-bg: #1A1A1A;
  --interactive-bg: #E0E0E0;
  --accent: #88BBFF;
  --muted-accent: #6699CC;
  --faded-fg: #888888;
  --code-bg: #2D2D2D;
  --code-fg: #E0E0E0;
  --code-comment: #999999;
  --code-keyword: #F97583;
  --code-string: #9ECBFF;
  --code-function: #B392F0;
  --code-number: #79B8FF;

  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-muted: var(--faded-fg);
  --color-surface: var(--box-bg);
  --color-accent: var(--accent);
  --color-accent-hover: var(--muted-accent);
  --color-border: var(--fg);
}

/* Dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  :root.hypercard-theme:not(.-no-dark-theme) {
    --fg: #E0E0E0;
    --bg: #1A1A1A;
    --box-bg: #1A1A1A;
    --interactive-bg: #E0E0E0;
    --accent: #88BBFF;
    --muted-accent: #6699CC;
    --faded-fg: #888888;
    --code-bg: #2D2D2D;
    --code-fg: #E0E0E0;
    --code-comment: #999999;
    --code-keyword: #F97583;
    --code-string: #9ECBFF;
    --code-function: #B392F0;
    --code-number: #79B8FF;

    --color-bg: var(--bg);
    --color-fg: var(--fg);
    --color-muted: var(--faded-fg);
    --color-surface: var(--box-bg);
    --color-accent: var(--accent);
    --color-accent-hover: var(--muted-accent);
    --color-border: var(--fg);
  }
}

/* ============================================
   HyperCard base styles
   ============================================ */

.hypercard-theme {
  font-family: var(--main-font);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--fg);
}

.hypercard-theme body {
  margin: 0 auto;
  padding: var(--space-4);
}

/* Navbar */
.hypercard-theme .navbar {
  background: var(--nav-bg);
  border-block-end: 4px solid var(--nav-border);
  font-family: var(--display-font);
  font-size: 0.875rem;
}

.hypercard-theme .navigation {
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

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

.hypercard-theme #features-list h2 {
  text-align: center;
  margin-block: var(--space-6);
}

.hypercard-theme #features-list > div {
  margin-block: calc(var(--space-3) * var(--density));
}

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

/* Thick borders on interactive elements */
.hypercard-theme input,
.hypercard-theme textarea,
.hypercard-theme select,
.hypercard-theme pre,
.hypercard-theme code {
  border: 4px solid var(--fg);
  border-radius: 0;
}

/* Buttons */
.hypercard-theme button,
.hypercard-theme .button {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 4px solid var(--fg);
  border-radius: 0;
  padding: 0.5rem 1rem;
  font-family: var(--main-font);
  font-size: 0.875rem;
  cursor: pointer;
}

.hypercard-theme button:hover,
.hypercard-theme .button:hover {
  background-color: var(--fg);
  color: var(--bg);
}

/* Card-based layout */
.hypercard-theme .card,
.hypercard-theme section,
.hypercard-theme article {
  border: 4px solid var(--card-border);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--card-bg);
}

/* No transitions on form controls (instant feedback like classic Mac)
   but allow transitions on hero/animation elements for LokaScript */
.hypercard-theme button,
.hypercard-theme .button,
.hypercard-theme input,
.hypercard-theme textarea,
.hypercard-theme select,
.hypercard-theme a {
  transition: none;
}

/* Active button state - classic Mac push effect */
.hypercard-theme button:active,
.hypercard-theme .button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Links */
.hypercard-theme a {
  color: var(--accent);
  text-decoration: underline;
}

.hypercard-theme a:visited {
  color: var(--muted-accent);
}

.hypercard-theme a:hover {
  background-color: var(--accent);
  color: var(--bg);
  text-decoration: none;
}

/* Headers */
.hypercard-theme h1,
.hypercard-theme h2,
.hypercard-theme h3,
.hypercard-theme h4,
.hypercard-theme h5,
.hypercard-theme h6 {
  font-family: var(--display-font);
  font-weight: bold;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* Code blocks */
.hypercard-theme pre,
.hypercard-theme pre[class*="language-"] {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--space-6);
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 1.125rem;
  line-height: 1.7;
  border: 2px solid var(--fg);
  box-shadow: var(--faded-fg) 2px 2px;
}

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

.hypercard-theme :not(pre) > code {
  background: var(--code-bg);
  padding: 0.2em 0.4em;
  border: 1px solid var(--faded-fg);
}

.hypercard-theme pre code {
  padding: 0;
  background: none;
  border: none;
}

/* Tables */
.hypercard-theme table {
  border-collapse: collapse;
  border: 4px solid var(--fg);
  width: 100%;
}

.hypercard-theme th,
.hypercard-theme td {
  border: 2px solid var(--fg);
  padding: 8px;
  text-align: start;
}

.hypercard-theme th {
  background: var(--fg);
  color: var(--bg);
  font-weight: bold;
}

/* Form elements */
.hypercard-theme input[type="text"],
.hypercard-theme input[type="email"],
.hypercard-theme input[type="password"],
.hypercard-theme input[type="number"],
.hypercard-theme textarea {
  background: var(--input-bg);
  color: var(--fg);
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.hypercard-theme input:focus,
.hypercard-theme textarea:focus {
  outline: 4px solid var(--accent);
  outline-offset: -4px;
}

/* Checkboxes and radio buttons */
.hypercard-theme input[type="checkbox"],
.hypercard-theme input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg);
  background: var(--bg);
  -webkit-appearance: none;
  appearance: none;
  margin-inline-end: 8px;
  vertical-align: middle;
}

.hypercard-theme input[type="checkbox"]:checked {
  background: var(--fg);
}

.hypercard-theme input[type="radio"] {
  border-radius: 50%;
}

.hypercard-theme input[type="radio"]:checked {
  background: radial-gradient(circle, var(--fg) 40%, var(--bg) 40%);
}

/* Scrollbars (webkit) */
.hypercard-theme ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.hypercard-theme ::-webkit-scrollbar-track {
  background: var(--bg);
  border: 2px solid var(--fg);
}

.hypercard-theme ::-webkit-scrollbar-thumb {
  background: var(--fg);
  border: 2px solid var(--bg);
}

/* Classic Mac window chrome for main content */
.hypercard-theme main {
  position: relative;
  border: 4px solid var(--fg);
  margin-top: 32px;
}

.hypercard-theme main::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -4px;
  right: -4px;
  height: 28px;
  background: var(--fg);
  border: 4px solid var(--fg);
  border-bottom: none;
}

.hypercard-theme main::after {
  content: 'HyperCard';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bg);
  font-family: var(--display-font);
  font-weight: bold;
  font-size: 14px;
  text-transform: none;
}

/* ============================================
   HyperCard Animations
   ============================================ */

/* --- Keyframes --- */

/* Blinking insertion cursor (ambient, CSS-only) */
@keyframes hc-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Zoom-rect: classic Mac window-open expanding rectangles (CSS fallback) */
@keyframes hc-zoom-rect {
  0%   { transform: scale(0.05); opacity: 0; }
  20%  { transform: scale(0.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Marching ants: animated dashed border for selection indicator */
@keyframes hc-marching-ants {
  0%   { background-position: 0 0, 100% 0, 100% 100%, 0 100%; }
  100% { background-position: 16px 0, 100% 16px, calc(100% - 16px) 100%, 0 calc(100% - 16px); }
}

/* CRT scanline reveal */
@keyframes hc-crt-reveal {
  0%   { clip-path: inset(50% 0 50% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* --- Animation Utility Classes --- */

/* Hero container — zoom-rect reveal on load */
.hypercard-theme .hc-hero {
  position: relative;
  border: 4px solid var(--fg);
  background: var(--box-bg);
  padding: 24px;
  margin-block: 32px;
  text-align: center;
}

/* CSS-only fallback reveal (use LokaScript _= for preferred interactive version) */
.hypercard-theme .hc-hero.hc-zoom-reveal {
  animation: hc-zoom-rect 0.6s ease-out both;
}

/* Hero image */
.hypercard-theme .hc-hero-img {
  display: block;
  margin: 0 auto;
  width: clamp(200px, 50%, 480px);
  height: auto;
}

/* Blinking insertion cursor — append to any text element */
.hypercard-theme .hc-cursor::after {
  content: '\2588'; /* Full block character ▉ */
  color: var(--fg);
  animation: hc-cursor-blink 1s step-end infinite;
  margin-inline-start: 2px;
}

/* Card stack — pseudo-element cards fanning behind the element */
.hypercard-theme .hc-card-stack {
  position: relative;
  display: inline-block;
}

.hypercard-theme .hc-card-stack::before,
.hypercard-theme .hc-card-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--fg);
  background: var(--bg);
  z-index: -1;
  transition: transform 0.3s ease;
}

.hypercard-theme .hc-card-stack::before {
  transform: rotate(-1.5deg) translate(-3px, 3px);
}

.hypercard-theme .hc-card-stack::after {
  transform: rotate(1.5deg) translate(3px, 3px);
}

.hypercard-theme .hc-card-stack:hover::before {
  transform: rotate(-4deg) translate(-8px, 6px);
}

.hypercard-theme .hc-card-stack:hover::after {
  transform: rotate(4deg) translate(8px, 6px);
}

/* Marching ants selection — toggled via LokaScript: _="on click toggle .hc-selected" */
.hypercard-theme .hc-selected {
  background-image:
    repeating-linear-gradient(90deg, var(--fg) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(180deg, var(--fg) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--fg) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(180deg, var(--fg) 0 4px, transparent 4px 8px);
  background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  padding: 6px;
  animation: hc-marching-ants 0.4s linear infinite;
}

/* CRT scanline boot reveal */
.hypercard-theme .hc-crt-reveal {
  animation: hc-crt-reveal 0.8s ease-out both;
}

/* ============================================
   Accessibility: respect reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .hypercard-theme .hc-hero.hc-zoom-reveal,
  .hypercard-theme .hc-crt-reveal {
    animation: none;
  }

  .hypercard-theme .hc-cursor::after {
    animation: none;
    opacity: 1;
  }

  .hypercard-theme .hc-selected {
    animation: none;
  }

  .hypercard-theme .hc-card-stack::before,
  .hypercard-theme .hc-card-stack::after {
    transition: none;
  }
}

/* ============================================
   High Contrast
   ============================================ */

@media (prefers-contrast: more) {
  :root.hypercard-theme {
    --faded-fg: #444444;
    --code-token-c: 0.18;
  }

  html.-dark-mode .hypercard-theme,
  .hypercard-theme.-dark-mode {
    --faded-fg: #BBBBBB;
  }
}