/* Pure Mac '84 Theme for Hyperscript */
/* Based on original Macintosh design constraints */

@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.pure-mac-84 {
  /* Typography - Classic Mac inspired but readable */
  --main-font: 'Geneva', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --secondary-font: 'Geneva', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display-font: 'ChicagoFLF', 'Chicago', 'Geneva', -apple-system, system-ui, sans-serif;
  --mono-font: 'Inconsolata', 'Monaco', 'SF Mono', 'Consolas', monospace;

  /* Code block colors */
  --code-bg: #F5F5F5;
  --code-fg: #1A1A1A;
  --code-comment: #6A737D;
  --code-keyword: #D73A49;
  --code-string: #032F62;
  --code-function: #6F42C1;
  --code-number: #005CC5;
  
  --rhythm: 1.5rem; /* 24px - matches classic Mac line height */
  --line-length: 48rem; /* 768px - wider for modern screens while maintaining classic proportions */
  --border-radius: 0; /* Pure rectangles */
  --density: 1.5; /* Generous spacing like classic Mac */
  
  /* Pure monochrome palette */
  --fg: #000000;
  --bg: #FFFFFF;
  --muted-fg: #000000; /* No muting - full contrast */
  --faded-fg: #666666; /* Dithered gray simulation */
  --graphical-fg: #000000;
  
  --box-bg: #FFFFFF;
  --interactive-bg: #000000; /* Inverted for buttons */
  
  --accent: #0000FF; /* Classic Mac blue */
  --muted-accent: #000088; /* Darker blue for visited links */
  
  /* Status colors - all monochrome except warn */
  --plain-fg: #000000;
  --plain-bg: #FFFFFF;
  --info-fg: #FFFFFF;
  --info-bg: #000000;
  --ok-fg: #000000;
  --ok-bg: #FFFFFF;
  --bad-fg: #FFFFFF;
  --bad-bg: #000000;
  --warn-fg: #000000;
  --warn-bg: #FFFF00; /* Only non-monochrome color */

  /* 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;

  /* Container widths */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
}

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

  /* Dark mode code colors */
  --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;
}

/* Dark mode - explicit toggle */
html.-dark-mode .pure-mac-84,
.pure-mac-84.-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;
}

/* Dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  :root.pure-mac-84: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;
  }
}

/* Pure Mac specific overrides */
.pure-mac-84 {
  /* Base typography */
  font-family: var(--main-font);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--fg);
}

.pure-mac-84 body {
  margin: 0 auto;
  padding: var(--space-4);
}

/* Navbar - prevent overflow */
.pure-mac-84 .navbar {
  font-family: var(--main-font);
  font-size: 0.875rem;
}

.pure-mac-84 .navigation {
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

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

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

.pure-mac-84 #features-list > div {
  margin-block: var(--space-3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pure-mac-84 .container {
    padding-inline: var(--space-4);
  }
}

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

/* Buttons - explicit styling for visibility */
.pure-mac-84 button,
.pure-mac-84 .button {
  background-color: var(--bg);
  color: var(--fg);
  border: 4px solid var(--fg);
  border-radius: 0;
  padding: 0.5rem 1rem;
  font-family: var(--main-font);
  font-size: 0.875rem;
  cursor: pointer;
}

.pure-mac-84 button:hover,
.pure-mac-84 .button:hover {
  background-color: var(--fg);
  color: var(--bg);
}

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

/* No transitions - instant feedback like classic Mac */
.pure-mac-84 * {
  transition: none;
}

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

/* Links */
.pure-mac-84 a {
  color: var(--accent);
  text-decoration: underline;
}

.pure-mac-84 a:visited {
  color: var(--muted-accent);
}

.pure-mac-84 a:hover {
  background-color: var(--accent);
  color: var(--bg);
  text-decoration: none;
}

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

/* Code blocks with classic Mac styling */
.pure-mac-84 pre,
.pure-mac-84 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;
}

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

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

.pure-mac-84 pre code {
  padding: 0;
  background: none;
  border: none;
}

/* Syntax highlighting */
.pure-mac-84 .token.comment,
.pure-mac-84 .token.prolog,
.pure-mac-84 .token.doctype,
.pure-mac-84 .token.cdata {
  color: var(--code-comment);
}

.pure-mac-84 .token.keyword,
.pure-mac-84 .token.tag,
.pure-mac-84 .token.boolean,
.pure-mac-84 .token.constant {
  color: var(--code-keyword);
}

.pure-mac-84 .token.string,
.pure-mac-84 .token.attr-value {
  color: var(--code-string);
}

.pure-mac-84 .token.function,
.pure-mac-84 .token.class-name {
  color: var(--code-function);
}

.pure-mac-84 .token.number {
  color: var(--code-number);
}

/* Tables with grid lines */
.pure-mac-84 table {
  border-collapse: collapse;
  border: 4px solid var(--fg);
  width: 100%;
}

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

.pure-mac-84 th {
  background: var(--fg);
  color: var(--bg);
  font-weight: bold;
}

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

.pure-mac-84 input:focus,
.pure-mac-84 textarea:focus {
  outline: 4px solid var(--accent);
  outline-offset: -4px;
}

/* Checkboxes and radio buttons */
.pure-mac-84 input[type="checkbox"],
.pure-mac-84 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;
}

.pure-mac-84 input[type="checkbox"]:checked {
  background: var(--fg);
}

.pure-mac-84 input[type="radio"] {
  border-radius: 50%;
}

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

/* Scrollbars (webkit only) */
.pure-mac-84 ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.pure-mac-84 ::-webkit-scrollbar-track {
  background: var(--bg);
  border: 2px solid var(--fg);
}

.pure-mac-84 ::-webkit-scrollbar-thumb {
  background: var(--fg);
  border: 2px solid var(--bg);
}

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

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

.pure-mac-84 main::after {
  content: 'hyperscript';
  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;
}