/* ================================================================
   Mashin Design System Tokens
   ================================================================ */

:root {
  /* Typography */
  --m-font-prose: "iA Writer Quattro", Georgia, serif;
  --m-font-code: "iA Writer Mono", "SF Mono", "Fira Code", monospace;
  --m-font-ui: "iA Writer Duo", "SF Mono", monospace;

  /* Font sizes (14px base, scaled up for marketing) */
  --m-text-xs: 12px;
  --m-text-sm: 14px;
  --m-text-base: 16px;
  --m-text-lg: 20px;
  --m-text-xl: 28px;
  --m-text-2xl: 40px;
  --m-text-3xl: 56px;
  --m-text-4xl: 72px;

  /* Line heights */
  --m-leading-compact: 1.0;
  --m-leading-tight: 1.15;
  --m-leading-code: 1.5;
  --m-leading-body: 1.6;

  /* Spacing (8px grid) */
  --m-space-1: 8px;
  --m-space-2: 16px;
  --m-space-3: 24px;
  --m-space-4: 32px;
  --m-space-5: 40px;
  --m-space-6: 48px;
  --m-space-8: 64px;
  --m-space-12: 96px;
  --m-space-16: 128px;

  /* Colors: light mode (default) */
  --m-bg: #FFFFFF;
  --m-surface: #FAFAFA;
  --m-muted: #F0F0F0;
  --m-text: #0A0A0A;
  --m-text-secondary: #6B6B6B;
  --m-text-tertiary: #9B9B9B;
  --m-border: #E8E8E8;
  --m-accent: #D63031;
  --m-accent-hover: #C0292A;
  --m-accent-subtle: #FDEAEA;

  /* Borders */
  --m-radius-sm: 4px;
  --m-radius-md: 6px;
  --m-radius-lg: 8px;

  /* Motion */
  --m-transition-fast: 150ms ease-out;

  /* Shadows */
  --m-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
  --m-bg: #0A0A0A;
  --m-surface: #141414;
  --m-muted: #1E1E1E;
  --m-text: #F5F5F5;
  --m-text-secondary: #8B8B8B;
  --m-text-tertiary: #5B5B5B;
  --m-border: #2A2A2A;
  --m-accent: #E17055;
  --m-accent-hover: #D4634A;
  --m-accent-subtle: #1F1714;
  --m-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ================================================================
   Reset & Base
   ================================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--m-font-prose);
  font-size: var(--m-text-base);
  line-height: var(--m-leading-body);
  color: var(--m-text);
  background-color: var(--m-bg);
  transition: background-color var(--m-transition-fast), color var(--m-transition-fast);
}

a {
  color: var(--m-accent);
  text-decoration: none;
  transition: color var(--m-transition-fast);
}

a:hover {
  color: var(--m-accent-hover);
}

code {
  font-family: var(--m-font-code);
  font-size: 0.9em;
  background: var(--m-muted);
  padding: 2px 6px;
  border-radius: var(--m-radius-sm);
}

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

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--m-space-4);
}

.container--narrow {
  max-width: 800px;
}

.section {
  padding: var(--m-space-12) 0;
}

.section--surface {
  background: var(--m-surface);
}

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--m-border);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--m-bg) 85%, transparent);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--m-space-1);
  font-family: var(--m-font-ui);
  font-size: var(--m-text-lg);
  color: var(--m-text);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav__logo:hover {
  color: var(--m-text);
}

.nav__logo-symbol {
  display: flex;
  align-items: center;
}

.nav__logo-symbol svg {
  width: 28px;
  height: 28px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--m-space-4);
  list-style: none;
}

.nav__link {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
  text-decoration: none;
  transition: color var(--m-transition-fast);
}

.nav__link:hover {
  color: var(--m-text);
}

.nav__theme-toggle {
  background: none;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-md);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--m-text-secondary);
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  transition: all var(--m-transition-fast);
}

.nav__theme-toggle:hover {
  border-color: var(--m-text-tertiary);
  color: var(--m-text);
}

.nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 4px;
}

.nav__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--m-text);
  border-radius: 1px;
  transition: all var(--m-transition-fast);
}

/* ================================================================
   Hero
   ================================================================ */

.hero {
  padding-top: calc(56px + var(--m-space-16));
  padding-bottom: var(--m-space-12);
  text-align: center;
}

.hero__tag {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--m-space-3);
}

.hero__headline {
  font-family: var(--m-font-prose);
  font-size: var(--m-text-3xl);
  font-weight: 700;
  line-height: var(--m-leading-tight);
  letter-spacing: -0.03em;
  max-width: 800px;
  margin: 0 auto var(--m-space-4);
}

.hero__subheadline {
  font-size: var(--m-text-lg);
  color: var(--m-text-secondary);
  line-height: var(--m-leading-body);
  max-width: 640px;
  margin: 0 auto var(--m-space-6);
}

.hero__actions {
  display: flex;
  gap: var(--m-space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   Buttons
   ================================================================ */

.btn {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-sm);
  padding: 12px 28px;
  border-radius: var(--m-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--m-transition-fast);
}

.btn--primary {
  background: var(--m-accent);
  color: #FFFFFF;
}

.btn--primary:hover {
  background: var(--m-accent-hover);
  color: #FFFFFF;
}

.btn--secondary {
  background: transparent;
  color: var(--m-text);
  border: 1px solid var(--m-border);
}

.btn--secondary:hover {
  background: var(--m-surface);
  border-color: var(--m-text-tertiary);
}

/* ================================================================
   Paradigm Contrast
   ================================================================ */

.paradigm {
  text-align: center;
}

.paradigm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-space-4);
  max-width: 800px;
  margin: var(--m-space-6) auto 0;
}

.paradigm__card {
  padding: var(--m-space-4);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  text-align: left;
}

.paradigm__card--old {
  opacity: 0.6;
}

.paradigm__card--new {
  border-color: var(--m-accent);
  background: var(--m-accent-subtle);
}

.paradigm__card-label {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-text-tertiary);
  margin-bottom: var(--m-space-2);
}

.paradigm__card--new .paradigm__card-label {
  color: var(--m-accent);
}

.paradigm__card-text {
  font-size: var(--m-text-base);
  line-height: var(--m-leading-body);
}

/* ================================================================
   Section Headers
   ================================================================ */

.section__tag {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--m-accent);
  margin-bottom: var(--m-space-2);
}

.section__title {
  font-size: var(--m-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--m-leading-tight);
  margin-bottom: var(--m-space-2);
}

.section__subtitle {
  font-size: var(--m-text-lg);
  color: var(--m-text-secondary);
  max-width: 640px;
}

.section--center {
  text-align: center;
}

.section--center .section__subtitle {
  margin: 0 auto;
}

/* ================================================================
   Pillars
   ================================================================ */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--m-space-4);
  margin-top: var(--m-space-8);
}

.pillar {
  padding: var(--m-space-4);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  transition: border-color var(--m-transition-fast);
}

.pillar:hover {
  border-color: var(--m-text-tertiary);
}

.pillar__number {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-accent);
  margin-bottom: var(--m-space-2);
}

.pillar__title {
  font-size: var(--m-text-lg);
  font-weight: 600;
  margin-bottom: var(--m-space-1);
  letter-spacing: -0.01em;
}

.pillar__text {
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
  line-height: var(--m-leading-body);
}

/* ================================================================
   One-Line Test
   ================================================================ */

.one-line-test__content {
  max-width: 800px;
  margin: 0 auto;
}

.one-line-test__description {
  font-size: var(--m-text-lg);
  color: var(--m-text-secondary);
  margin-bottom: var(--m-space-6);
  max-width: 640px;
}

.code-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-space-3);
}

.code-block {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
}

.code-block__header {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  padding: var(--m-space-1) var(--m-space-2);
  border-bottom: 1px solid var(--m-border);
  color: var(--m-text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.code-block__header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.code-block--fail .code-block__header-dot {
  background: var(--m-accent);
}

.code-block--pass .code-block__header-dot {
  background: #27AE60;
}

[data-theme="dark"] .code-block--pass .code-block__header-dot {
  background: #6BCB77;
}

.code-block__body {
  padding: var(--m-space-2);
  font-family: var(--m-font-code);
  font-size: var(--m-text-sm);
  line-height: var(--m-leading-code);
  overflow-x: auto;
}

.code-block__body pre {
  margin: 0;
}

.code-comment { color: var(--m-text-tertiary); }
.code-string { color: #27AE60; }
[data-theme="dark"] .code-string { color: #6BCB77; }
.code-keyword { color: var(--m-accent); }
.code-fn { color: #2D9CDB; }
[data-theme="dark"] .code-fn { color: #74B9FF; }

.code-verdict {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  padding: var(--m-space-1) var(--m-space-2);
  border-top: 1px solid var(--m-border);
  color: var(--m-text-tertiary);
}

.code-block--fail .code-verdict { color: var(--m-accent); }
.code-block--pass .code-verdict { color: #27AE60; }
[data-theme="dark"] .code-block--pass .code-verdict { color: #6BCB77; }

/* ================================================================
   Stats
   ================================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--m-space-4);
  margin-top: var(--m-space-8);
}

.stat { text-align: center; }

.stat__number {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-2xl);
  font-weight: 700;
  color: var(--m-text);
  letter-spacing: -0.03em;
}

.stat__label {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-text-tertiary);
  margin-top: 4px;
}

/* ================================================================
   Progression
   ================================================================ */

.progression {
  margin-top: var(--m-space-8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.progression__item {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: var(--m-space-2) 0;
  border-bottom: 1px solid var(--m-border);
}

.progression__item:last-child { border-bottom: none; }

.progression__layer {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-sm);
  font-weight: 600;
  min-width: 200px;
}

.progression__absorbed {
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
}

.progression__item--current .progression__layer { color: var(--m-accent); }

.progression__item--current {
  background: var(--m-accent-subtle);
  margin: 0 calc(-1 * var(--m-space-2));
  padding: var(--m-space-2);
  border-radius: var(--m-radius-md);
  border-bottom: none;
}

/* ================================================================
   Audience Cards
   ================================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-space-4);
  margin-top: var(--m-space-8);
}

.audience-card {
  padding: var(--m-space-5);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
}

.audience-card__label {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-accent);
  margin-bottom: var(--m-space-2);
}

.audience-card__headline {
  font-size: var(--m-text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--m-leading-tight);
  margin-bottom: var(--m-space-2);
}

.audience-card__text {
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
  line-height: var(--m-leading-body);
}

/* ================================================================
   Research Papers
   ================================================================ */

.research-grid {
  display: grid;
  gap: var(--m-space-3);
  margin-top: var(--m-space-6);
}

.research-card {
  padding: var(--m-space-4);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  transition: border-color var(--m-transition-fast);
}

.research-card:hover {
  border-color: var(--m-text-tertiary);
}

.research-card__id {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--m-space-1);
}

.research-card__title {
  font-size: var(--m-text-base);
  font-weight: 600;
  margin-bottom: var(--m-space-1);
  line-height: var(--m-leading-tight);
}

.research-card__title a {
  color: var(--m-text);
  text-decoration: none;
}

.research-card__title a:hover {
  color: var(--m-accent);
}

.research-card__meta {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-text-tertiary);
  margin-bottom: var(--m-space-1);
}

.research-card__abstract {
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
  line-height: var(--m-leading-body);
}

/* ================================================================
   Comparison Table
   ================================================================ */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--m-space-6);
  font-size: var(--m-text-sm);
}

.comparison-table th,
.comparison-table td {
  text-align: left;
  padding: var(--m-space-1) var(--m-space-2);
  border-bottom: 1px solid var(--m-border);
}

.comparison-table th {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-text-tertiary);
  font-weight: 500;
}

.comparison-table td:first-child { color: var(--m-text-secondary); }
.comparison-table td:last-child { font-weight: 600; color: var(--m-accent); }
.comparison-table .advisory { color: var(--m-text-tertiary); font-weight: 400; }

/* ================================================================
   CTA Section
   ================================================================ */

.cta-section {
  text-align: center;
  padding: var(--m-space-16) 0;
}

.cta-section__title {
  font-size: var(--m-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--m-space-2);
}

.cta-section__subtitle {
  font-size: var(--m-text-lg);
  color: var(--m-text-secondary);
  margin-bottom: var(--m-space-5);
}

/* ================================================================
   Newsletter Form
   ================================================================ */

.newsletter-form {
  display: flex;
  gap: var(--m-space-1);
  max-width: 440px;
  margin: var(--m-space-4) auto 0;
}

.newsletter-form__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-md);
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-ui);
  font-size: var(--m-text-sm);
  outline: none;
  transition: border-color var(--m-transition-fast);
}

.newsletter-form__input:focus {
  border-color: var(--m-accent);
}

.newsletter-form__input::placeholder {
  color: var(--m-text-tertiary);
}

.newsletter-form__status {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  margin-top: var(--m-space-1);
  text-align: center;
}

.newsletter-form__status--success { color: #27AE60; }
.newsletter-form__status--error { color: var(--m-accent); }

/* ================================================================
   Footer
   ================================================================ */

.footer {
  border-top: 1px solid var(--m-border);
  padding: var(--m-space-6) 0;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: var(--m-space-1);
  font-family: var(--m-font-ui);
  font-size: var(--m-text-sm);
  color: var(--m-text-secondary);
}

.footer__left-symbol { color: var(--m-accent); }

.footer__links {
  display: flex;
  gap: var(--m-space-3);
  list-style: none;
}

.footer__link {
  font-family: var(--m-font-ui);
  font-size: var(--m-text-xs);
  color: var(--m-text-tertiary);
  text-decoration: none;
}

.footer__link:hover { color: var(--m-text); }

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

@media (max-width: 768px) {
  .hero__headline { font-size: var(--m-text-2xl); }
  .hero__subheadline { font-size: var(--m-text-base); }
  .pillars { grid-template-columns: 1fr; }
  .code-comparison { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: 1fr; }
  .paradigm__grid { grid-template-columns: 1fr; }
  .progression__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nav__hamburger { display: flex; }
  .nav__links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-border);
    flex-direction: column;
    padding: var(--m-space-2) var(--m-space-4);
    gap: 0;
  }
  .nav__links--open { display: flex; }
  .nav__links li { padding: var(--m-space-1) 0; }
  .footer__inner {
    flex-direction: column;
    gap: var(--m-space-2);
  }
  .newsletter-form {
    flex-direction: column;
  }
}