/* ===================================================================
 * Digital Climbing Book — Brand Foundation v1 (Alpha 2 tokens)
 * Loaded site-wide on the splash artifact. The `/forms/*` pages use
 * the form-scoped `.page-*` + `.brand-*` component classes defined
 * here; the marketing pages (`/`, `/about`, `/privacy`) use this for
 * tokens + fonts and layer their own components on top via style.css
 * (loaded second so it can override). See replit.md > "Brand
 * foundation v1".
 * =================================================================== */

@font-face {
  font-family: "Kiona";
  src:
    url("/fonts/Kiona-Regular.woff2") format("woff2"),
    url("/fonts/Kiona-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kiona";
  src:
    url("/fonts/Kiona-SemiBold.woff2") format("woff2"),
    url("/fonts/Kiona-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fragment Mono — self-hosted woff2 (Google Fonts source, OFL-licensed). */
@font-face {
  font-family: "Fragment Mono";
  src: url("/fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Black / Slate (extracted) === */
  --c-black-100: #000000;
  --c-black-90:  #040404;
  --c-black-80:  #1B1B1B;
  --c-black-70:  #2B2B2B;
  --c-black-60:  #333333;
  --c-black-10:  #D9D9D9;

  --c-slate-100: #35363A;
  --c-slate-80:  #4B4B50;
  --c-slate-60:  #5E5E60;
  --c-slate-40:  #6B6B70;
  --c-slate-20:  #8D8D8E;
  --c-slate-10:  #C8C8CC;

  /* === Slopey Red === */
  --c-slopey-100: #C54831;
  --c-slopey-80:  #D26354;
  --c-slopey-60:  #DD8170;
  --c-slopey-40:  #E89F8B;
  --c-slopey-20:  #F5BBA8;
  --c-slopey-10:  #FBD9CE;

  /* === Slabby Green === */
  --c-slabby-100: #22B83C;
  --c-slabby-80:  #4ECC60;
  --c-slabby-60:  #75D784;
  --c-slabby-40:  #9DE2A8;
  --c-slabby-20:  #C2EDCB;
  --c-slabby-10:  #DEF5E2;

  /* === Peachy === */
  --c-peachy-100: #F0B47A;
  --c-peachy-80:  #F4C495;
  --c-peachy-60:  #F8D4B0;
  --c-peachy-40:  #FBE2C9;
  --c-peachy-20:  #FDEDDD;
  --c-peachy-10:  #FEF6EE;

  /* === Sunburst === */
  --c-sunburst-100: #E5B12B;
  --c-sunburst-80:  #EAC04E;
  --c-sunburst-60:  #EFCD73;
  --c-sunburst-40:  #F4DA98;
  --c-sunburst-20:  #F8E6BB;
  --c-sunburst-10:  #FCF1DA;

  /* === Sky Blue === */
  --c-sky-100: #2E7DE6;
  --c-sky-80:  #5392EC;
  --c-sky-60:  #7AA8F1;
  --c-sky-40:  #A2BFF6;
  --c-sky-20:  #C8D7F9;
  --c-sky-10:  #E2EAFC;

  /* === Overhang Purple === */
  --c-overhang-100: #5D3FB0;
  --c-overhang-80:  #7559C0;
  --c-overhang-60:  #8E76CE;
  --c-overhang-40:  #A893DC;
  --c-overhang-20:  #C2B1E8;
  --c-overhang-10:  #DCD2F2;

  /* === Type stack ===
     SF Pro is Apple-licensed; Inter is the cross-platform fallback. */
  --font-display: "Kiona", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "SF Pro", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Per-page accents (overridden in each .page-* class below). */
  --page-bg:        var(--c-black-90);
  --page-fg:        #F5F5F7;
  --page-accent:    var(--c-slopey-100);
  --page-accent-on: var(--c-black-90);
  --card-bg:        #1A1A1A;
  --card-input-bg:  #232325;
  --card-border:    #2A2A2C;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--page-fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-weight: 300; /* SF Pro Light 18 — body default */
  font-size: 16px;
}
a { color: inherit; text-decoration: underline; }

/* ===== Page tints (Form 1 stays slate; Form 2 = Slopey; Form 3 = Overhang) ===== */
.page-climb-update {
  --page-bg: var(--c-black-90);
  --page-accent: var(--c-slabby-100);
  --page-accent-on: #0E1A11;
}
.page-world-region {
  --page-bg: var(--c-slopey-80);
  --page-fg: #FFF;
  --page-accent: var(--c-slopey-100);
  --page-accent-on: #FFF;
}
.page-bug-report {
  --page-bg: var(--c-overhang-80);
  --page-fg: #FFF;
  --page-accent: var(--c-overhang-10);
  --page-accent-on: var(--c-overhang-100);
}
.page-account-deletion {
  --page-bg: var(--c-black-90);
  --page-accent: var(--c-slate-10);
  --page-accent-on: var(--c-black-90);
}

/* ===== Layout ===== */
.brand-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 56px 32px 80px;
}
.brand-shell::before {
  /* Faint diagonal facet overlay — built from CSS gradients so it scales freely
     and recolors with --page-bg. Recreates the volume-shading from the design. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.18) 0%, transparent 38%, transparent 62%, rgba(0,0,0,0.20) 100%),
    linear-gradient(105deg, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.brand-shell > * { position: relative; z-index: 1; }

.brand-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.brand-nav a { text-decoration: none; }
.brand-nav a:hover { opacity: 0.7; }

.brand-frame {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* ===== Headline (Kiona Semibold) — two-line block:
   .brand-headline   = the huge top word (~120pt max)
   .brand-subhead    = the smaller "A World Region" line (~46pt max)
   ~50px of breathing room sits below the subhead before the form card. */
.brand-headline-block { margin-top: 8px; }
.brand-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(72px, 14vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 16px 0 6px;
  color: #FFF;
}
.brand-subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 5vw, 46px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 50px;
  color: #FFF;
}

/* ===== Accents (PNG rock textures, positioned top-right of headline) =====
   The PNGs are pre-rendered white line art on transparent bg, so per-page
   tinting via currentColor no longer applies — the same white linework is
   used on every page background, matching the reference. */
.brand-accent {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  height: auto;
}
.brand-accent.slope {
  top: -4px;
  right: -140px;
  width: 420px;
}
.brand-accent.volume {
  top: -8px;
  right: -120px;
  width: 380px;
}
@media (max-width: 720px) {
  .brand-accent { display: none; }
}

/* ===== Form card ===== */
.form-card {
  background: var(--card-bg);
  border-radius: 4px;
  padding: 28px 28px 36px;
  position: relative;
  z-index: 1;
}
.form-row { margin-bottom: 18px; }
.form-row:last-of-type { margin-bottom: 28px; }
.form-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFF;
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.form-label .form-hint {
  color: rgba(255,255,255,0.55);
  margin-left: 6px;
}
.form-input,
.form-textarea {
  width: 100%;
  background: var(--card-input-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #FFF;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  transition: border-color 0.15s, background 0.15s;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255,255,255,0.42);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--page-accent);
  background: #2A2A2C;
}
.form-textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}

.form-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 28px;
}
.form-check-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFF;
  letter-spacing: 0.02em;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--page-accent);
  cursor: pointer;
}

.form-submit {
  display: block;
  margin: 0 auto;
  padding: 14px 56px;
  background: var(--page-accent);
  color: var(--page-accent-on);
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s, transform 0.05s;
}
.form-submit:hover { opacity: 0.92; }
.form-submit:active { transform: translateY(1px); }
.form-submit[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ===== Body copy + legal block ===== */
.copy-block {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-climb-update .copy-block,
.page-account-deletion .copy-block { color: rgba(255,255,255,0.78); }
/* Account-deletion still uses the legacy single-line headline (no subhead),
   so scope it back to the pre-#93 size so "DELETE Account & DATA" fits
   cleanly without picking up the larger 3-form proportions. */
.page-account-deletion .brand-headline {
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.95;
  margin: 16px 0 36px;
}
.copy-block a { text-decoration: underline; }

/* ===== Live character counter (under body textarea) ===== */
.form-charcount {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  text-align: right;
}
.form-charcount-warn { color: var(--c-slopey-60); }

/* ===== Confirmation state ===== */
.form-confirm {
  background: var(--card-bg);
  border-radius: 4px;
  padding: 36px 28px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #FFF;
}
.form-confirm-mark {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--page-accent);
  margin-bottom: 12px;
}

/* ===== Forms landing page (/forms) ===== */
.forms-landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 120px 32px 80px;
  font-family: var(--font-body);
}
.forms-landing-header { margin-bottom: 36px; }
.forms-landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin-bottom: 10px;
}
.forms-landing .brand-headline {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 14px;
}
.forms-landing-intro {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
}

.form-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.form-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 22px 20px 20px;
  color: #FFF;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.form-panel:hover,
.form-panel:focus-visible {
  transform: translateY(-2px);
  border-color: var(--page-accent);
  background: #1F1F1F;
  outline: none;
}
.form-panel:focus-visible {
  box-shadow: 0 0 0 2px var(--page-accent);
}
.form-panel-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--page-accent);
}
.form-panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.form-panel-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.form-panel-cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-accent);
}

.forms-landing-footnote {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.forms-landing-footnote a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* "Return to feedback" link inside .form-confirm */
.form-confirm-return {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-accent);
  text-decoration: none;
  border: 1px solid var(--page-accent);
  border-radius: 4px;
  padding: 10px 16px;
}
.form-confirm-return:hover,
.form-confirm-return:focus-visible {
  background: var(--page-accent);
  color: var(--page-accent-on);
  outline: none;
}

/* ===== Account-deletion placeholder ===== */
.placeholder-block {
  background: var(--card-bg);
  border-radius: 4px;
  padding: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}
.placeholder-block .pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 14px;
}