/* AJ Worker — Polish proposal. Editorial system, elevated. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* Brand tokens — straight from theme.dart */
  --bg: #F7F7F4;
  --panel: #FFFFFF;
  --ink: #161412;
  --ink2: #3A3631;
  --muted: #7C766D;
  --line: #E8E5DF;
  --line2: #F0EDE7;
  --accent: #C4282D;
  --accent-soft: #FBE9EA;
  --accent-deep: #8C1C20;
  --green: #2D7A4A;
  --green-soft: #E3F1E8;
  --amber: #A86B00;
  --amber-soft: #FAF0D8;
  --blue: #1E5FB3;
  --blue-soft: #E0EAF7;
  --violet: #6B3FA8;
  --violet-soft: #ECE4F5;
  --slate: #4A5160;
  --slate-soft: #EBECEF;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Surface treatment for the premium card */
  --card-grad: linear-gradient(180deg, #FFFFFF 0%, #FDFBF8 100%);
  --hairline: rgba(22,20,18,0.07);
  --top-shine: inset 0 1px 0 rgba(255,255,255,0.9);

  /* Depth scale — overridden per level below */
  --sh-raise: 0 1px 2px rgba(40,33,28,0.05), 0 3px 8px rgba(40,33,28,0.05);
  --sh-card:  0 1px 2px rgba(40,33,28,0.04), 0 6px 16px rgba(40,33,28,0.07), 0 18px 40px rgba(40,33,28,0.06);
  --sh-float: 0 2px 6px rgba(40,33,28,0.10), 0 12px 28px rgba(40,33,28,0.16), 0 28px 64px rgba(40,33,28,0.14);
  --sh-cta:   0 1px 1px rgba(124,16,18,0.30), 0 6px 14px rgba(196,40,45,0.34), 0 12px 28px rgba(196,40,45,0.24);
  --sh-cta-press: 0 1px 2px rgba(124,16,18,0.4), 0 2px 6px rgba(196,40,45,0.3);
}

/* ── Depth levels (set on .app-root via tweak) ───────────── */
.depth-subtle {
  --sh-raise: 0 1px 2px rgba(40,33,28,0.04);
  --sh-card:  0 1px 2px rgba(40,33,28,0.04), 0 4px 10px rgba(40,33,28,0.05);
  --sh-float: 0 2px 6px rgba(40,33,28,0.08), 0 8px 20px rgba(40,33,28,0.10);
  --sh-cta:   0 2px 6px rgba(196,40,45,0.22);
}
.depth-medium {
  --sh-raise: 0 1px 2px rgba(40,33,28,0.05), 0 3px 8px rgba(40,33,28,0.05);
  --sh-card:  0 1px 2px rgba(40,33,28,0.04), 0 6px 16px rgba(40,33,28,0.07), 0 14px 30px rgba(40,33,28,0.05);
  --sh-float: 0 2px 6px rgba(40,33,28,0.10), 0 10px 24px rgba(40,33,28,0.13), 0 22px 48px rgba(40,33,28,0.10);
  --sh-cta:   0 1px 1px rgba(124,16,18,0.28), 0 5px 12px rgba(196,40,45,0.30);
}
.depth-bold {
  --sh-raise: 0 1px 2px rgba(40,33,28,0.06), 0 4px 10px rgba(40,33,28,0.07);
  --sh-card:  0 1px 2px rgba(40,33,28,0.05), 0 8px 20px rgba(40,33,28,0.09), 0 24px 52px rgba(40,33,28,0.10);
  --sh-float: 0 3px 8px rgba(40,33,28,0.14), 0 16px 34px rgba(40,33,28,0.20), 0 36px 80px rgba(40,33,28,0.18);
  --sh-cta:   0 1px 1px rgba(124,16,18,0.34), 0 7px 16px rgba(196,40,45,0.38), 0 16px 36px rgba(196,40,45,0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #FBFBF9 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ── App screen surface ──────────────────────────────────── */
.app-root {
  height: 100%;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  position: relative;
}
.app-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 124px; /* clear floating nav */
}

/* Premium card surface */
.aj-card {
  position: relative;
  background: var(--card-grad);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--top-shine), var(--sh-card);
}

.aj-raise {
  background: var(--card-grad);
  border: 1px solid var(--hairline);
  box-shadow: var(--top-shine), var(--sh-raise);
}

/* Big serif headline */
.aj-h1 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
}
.aj-sub { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Hide native focus ring noise but keep accessibility on keyboard */
:focus { outline: none; }

/* Page (proposal) layout helpers */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 56px 28px 120px; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--accent);
}
.page-title { font-family: var(--serif); font-weight: 500; font-size: 44px; letter-spacing: -1px; line-height: 1.02; margin: 14px 0 0; }
.page-lede { font-size: 16px; line-height: 1.6; color: var(--ink2); max-width: 620px; margin: 16px 0 0; }
.section-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}

.fade-up { animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes fadeUp { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }