/* ============================================================
   SO LONG SATURN — BRAND SYSTEM v3 (cream paper, dual atmosphere)
   1969 mission control, both daylight briefing room and
   nighttime control room. Cream paper as default, dark for
   live-system surfaces (Operator Room, pricing).
   ============================================================ */

/* -- 1. FONTS ----------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* -- 2. TOKENS ---------------------------------------------- */
:root {

  /* === PAPER LAYER (default page atmosphere — cooler aged-document grayscale) === */
  --paper-bg:    #E2DFD7; /* aged off-white, less yellow than v3.0 */
  --paper-bg-2:  #D6D3CB; /* card/panel surface */
  --paper-bg-3:  #C5C2B9; /* deepest paper layer / dividers */
  --ink-deep:    #1A1A1A; /* near-black text on paper */
  --ink-mid:     #4A4A48; /* secondary text */
  --ink-quiet:   #7A7A75; /* tertiary, system labels */
  --rule-paper:  #B8B5AC; /* hairlines */
  --rule-paper-2:#9E9B91; /* visible borders */

  /* === DARK LAYER (system surfaces — Operator Room, pricing, etc.) === */
  --ink-100:    #0A0A0A;
  --ink-200:    #14141A;
  --ink-300:    #1C1C24;
  --rule-100:   #2A2A33;
  --rule-200:   #3F3F4A;
  --paper-100:  #EFEAE0;
  --paper-200:  #B8B0A2;
  --paper-300:  #6B655B;

  /* === EMBER (primary accent, both atmospheres) === */
  --ember-100: #C0532B;
  --ember-200: #E27348;
  --ember-300: #7A3017;

  /* === CYAN (secondary, dark surfaces only) === */
  --cyan-100: #3E7B82;
  --cyan-200: #5BA0A7;
  --cyan-300: #285257;

  /* === SIGNAL (positive metric, dark only) === */
  --signal: #5A8A6D;

  /* === TYPE STACK === */
  --font-display: 'IBM Plex Mono', ui-monospace, monospace; /* typed mission report */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* === SCALE === */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  4.5rem;
  --t-5xl:  6rem;
  --t-hero: 8rem;

  /* === SPACING === */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* === LAYOUT === */
  --content-max:    1280px;
  --content-narrow: 880px;
  --content-prose:  640px;

  /* === MOTION === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --dur-cinematic: 900ms;

  /* === BORDERS === */
  --radius: 0;
  --radius-soft: 2px;
}

/* -- 3. RESET ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper-bg);
  color: var(--ink-deep);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* -- 4. ATMOSPHERE SECTIONS --------------------------------- */
.section--paper { background: var(--paper-bg); color: var(--ink-deep); }
.section--dark  { background: var(--ink-100);  color: var(--paper-100); }
.section--paper .text-secondary { color: var(--ink-mid); }
.section--paper .text-quiet     { color: var(--ink-quiet); }
.section--dark .text-secondary  { color: var(--paper-200); }
.section--dark .text-quiet      { color: var(--paper-300); }

/* -- 5. TYPOGRAPHY UTILITIES -------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: none;
}
/* No more serif italic. If italic is needed, use IBM Plex Mono italic. */
.t-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
.t-body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; }
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-xs);
}
.t-mono-data {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: 'tnum';
}

/* SIGNATURE HEADLINE PATTERN
   Anton uppercase, period in burnt orange (Content That Travels Further.) */
.headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-transform: none;
}
.headline .period { color: var(--ember-100); }
/* Accent treatment — no italic. Use orange highlight or stamp box. */
.headline em,
.headline .accent {
  color: var(--ember-100);
  font-weight: 700;
}
/* Orange "stamp" highlight — like vintage rubber-stamp emphasis */
.headline .stamp {
  display: inline-block;
  background: var(--ember-100);
  color: var(--paper-bg);
  padding: 0 0.18em;
  margin: 0 0.04em;
  letter-spacing: -0.04em;
  font-weight: 700;
}

/* -- 6. SYSTEM LABELS (NASA telemetry) ---------------------- */
.system-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-100);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.section--paper .system-label--quiet { color: var(--ink-quiet); }
.section--dark  .system-label--quiet { color: var(--paper-300); }

/* Section label rule that extends */
.label-rule { display: flex; align-items: center; gap: var(--s-3); }
.label-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ember-100);
  opacity: 0.6;
}

/* -- 7. CONTAINERS ------------------------------------------ */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-6); }
.container--narrow { max-width: var(--content-narrow); }
.container--prose  { max-width: var(--content-prose); }

/* -- 8. HAIRLINES (atmosphere-aware) ------------------------ */
.section--paper .hairline,
.section--paper.hairline-bottom { border-color: var(--rule-paper); }
.section--dark .hairline,
.section--dark.hairline-bottom  { border-color: var(--rule-100); }

/* -- 9. BUTTONS --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink-deep);
  background: transparent;
  color: var(--ink-deep);
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.btn:hover { background: var(--ink-deep); color: var(--paper-bg); }
.btn--primary {
  background: var(--ember-100);
  border-color: var(--ember-100);
  color: var(--paper-bg);
  font-weight: 600;
}
.btn--primary:hover { background: var(--ember-200); border-color: var(--ember-200); color: var(--ink-deep); }
.btn--ghost { border-color: var(--ink-quiet); color: var(--ink-mid); }
.btn--ghost:hover { background: transparent; border-color: var(--ink-deep); color: var(--ink-deep); }

/* On dark surfaces */
.section--dark .btn { border-color: var(--paper-100); color: var(--paper-100); }
.section--dark .btn:hover { background: var(--paper-100); color: var(--ink-100); }
.section--dark .btn--primary { background: var(--ember-100); border-color: var(--ember-100); color: var(--ink-100); }
.section--dark .btn--primary:hover { background: var(--ember-200); border-color: var(--ember-200); color: var(--ink-100); }
.section--dark .btn--ghost { border-color: var(--paper-300); color: var(--paper-200); }
.section--dark .btn--ghost:hover { border-color: var(--paper-100); color: var(--paper-100); background: transparent; }

.btn-arrow::after {
  content: '→';
  font-family: var(--font-mono);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* -- 10. FORMS ---------------------------------------------- */
.field {
  display: block;
  width: 100%;
  padding: var(--s-4);
  background: var(--paper-bg-2);
  border: 1px solid var(--rule-paper);
  color: var(--ink-deep);
  font-family: var(--font-body);
  font-size: var(--t-base);
  transition: border-color var(--dur-base) var(--ease-out);
}
.field:focus { outline: none; border-color: var(--ember-100); }
.field-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  display: block;
  margin-bottom: var(--s-2);
}
.section--dark .field {
  background: var(--ink-200);
  border-color: var(--rule-100);
  color: var(--paper-100);
}
.section--dark .field-label { color: var(--paper-300); }

/* -- 11. HATCHED FRAMES ------------------------------------- */
.hatch--paper {
  background-image: repeating-linear-gradient(-45deg, var(--rule-paper) 0, var(--rule-paper) 1px, transparent 1px, transparent 8px);
}
.hatch--dark {
  background-image: repeating-linear-gradient(-45deg, var(--rule-200) 0, var(--rule-200) 1px, transparent 1px, transparent 8px);
}

/* -- 12. CORNER MARKS --------------------------------------- */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after {
  content: '+';
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  color: var(--ember-100);
  line-height: 1;
  font-weight: 300;
}
.corner-marks::before { top: -8px; left: -8px; }
.corner-marks::after  { bottom: -8px; right: -8px; }

/* -- 13. ANIMATIONS ----------------------------------------- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in-up var(--dur-cinematic) var(--ease-out) both; }

/* -- 14. RESPONSIVE ----------------------------------------- */
@media (max-width: 900px) {
  :root {
    --t-hero: 3.5rem;
    --t-5xl:  3rem;
    --t-4xl:  2.5rem;
    --t-3xl:  2rem;
    --t-2xl:  1.625rem;
  }
  .container { padding: 0 var(--s-4); }
}