/* ============================================================
   EternalCurrent.Online — Layout System
   css/layout.css — page structure, grid, flex, spacing, media
   No hardcoded colors. All theming via theme.css variables.
   ============================================================ */

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

html, body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* ── PAGE SHELL ── */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) 80px;
}

.page-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) 80px;
}

.page-narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) 80px;
}

/* ── GRID LAYOUTS ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

/* ── FLEX UTILITIES ── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-1       { gap: var(--space-1); }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-5       { gap: var(--space-5); }
.ml-auto     { margin-left: auto; }

/* ── SPACING UTILITIES ── */
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }

/* ── SECTION DIVIDERS ── */
.section-gap  { margin-bottom: var(--space-8); }
.section-gap-sm { margin-bottom: var(--space-5); }

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: repeat(2, 1fr); }
  .four-col  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .page, .page-wide, .page-narrow {
    padding: var(--space-5) var(--space-5) 60px;
  }
  .three-col { grid-template-columns: 1fr; }
  .four-col  { grid-template-columns: 1fr 1fr; }
  .two-col   { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CONTRAST ENFORCEMENT — Single source of truth
   theme.css defines the tokens. layout.css enforces the contract.
   Rule: light text on dark bg, dark text on light bg — automatic.
   --color-text flips per theme:
     void/deep-sea → #E8F4F0 (light on dark)
     grove/parchment → #0D1F1A (dark on light)
   Never redeclare body color/bg in page CSS files.
   ══════════════════════════════════════════════════════════════ */

/* Surfaces inherit theme-correct text */
.page, .shell, .panel, .card, .modal,
.usr-card, .feed-card, .feat,
.phase-card, .story-slot, .promise-row,
section, article, main {
  color: var(--color-text);
}

/* Headings always full contrast */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
}

/* Text elements inherit — do not fight the cascade */
p, li, td, th, label {
  color: inherit;
}

/* Links use accent color — readable on both dark and light */
a:not([class]) {
  color: var(--color-accent-c);
}

/* Form elements fully theme-adaptive */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}