/* ============================================================================
   ALTERVIEW — design tokens
   Evolves Marnji's warm system (canvas #FBFAF9 / line #E7E0D7 / ink #181614,
   Figtree + Newsreader) toward B2B trust: warmer trust-paper, a reserved
   verified-green used ONLY on evidence/verification marks, and amber ONLY for
   inconsistency. No dashboard-blue. Scope everything under .alterview.
   "Receipts, not scores."
   ============================================================================ */
@import "fonts.css";

.alterview{
  /* -- warm trust paper -- */
  --paper:      #FCF7EF;   /* app ground (warmer than Marnji canvas) */
  --paper-2:    #F6EEE0;   /* inset / recessed wells */
  --paper-3:    #F1E7D6;   /* deep inset, table zebra */
  --surface:    #FFFFFF;   /* cards, sheets, the "document" */
  --surface-2:  #FBF8F2;   /* subtle raised */

  /* -- warm hairlines -- */
  --border:     #E4D4BE;   /* primary rule (given) */
  --border-soft:#EFE6D6;   /* quiet divider */
  --border-strong:#D8C4A6; /* emphasis rule / focus ring base */

  /* -- warm ink ladder -- */
  --ink:    #201B14;   /* headings, primary text */
  --ink-2:  #4A443B;   /* secondary text */
  --muted:  #6E665A;   /* labels, meta */
  --faint:  #9C9081;   /* decorative / disabled ONLY (warm gray, use ≥AA carefully) */

  /* -- warm brown (Marnji primary), used sparingly for editorial accent -- */
  --brown:  #6B5D42;

  /* -- ACTION: ink, never blue. The product is not a dashboard. -- */
  --cta:        #201B14;
  --cta-hover:  #33291E;
  --cta-ink:    #FCF7EF;   /* text on the ink button */

  /* -- VERIFIED-GREEN — RESERVED. Only ever on evidence/verification marks
        and the identity-verified badge. Never a generic UI accent. -- */
  --verified:      #157A4A;   /* mark / border on light */
  --verified-mark: #1B8A52;   /* filled seal shape */
  --verified-ink:  #0E5C37;   /* text on wash (AA on --verified-wash) */
  --verified-wash: #E8F1E9;
  --verified-line: #C2DEC9;

  /* -- AMBER — RESERVED. Only ever on the "inconsistent / conflict" flag. -- */
  --amber:      #B5730A;   /* mark / text */
  --amber-ink:  #855205;   /* darker text on wash */
  --amber-wash: #F8EDD6;
  --amber-line: #E8CF9C;

  /* -- type -- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Figtree", "Inter", -apple-system, system-ui, sans-serif;

  /* -- radii: near-square, document-like (not pill-soft) -- */
  --r-sm: 6px;
  --r:    9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* -- elevation: warm, low, paper-shadow (no cold gray) -- */
  --sh-1: 0 1px 2px rgba(58,43,20,.06), 0 1px 1px rgba(58,43,20,.04);
  --sh-2: 0 2px 8px rgba(58,43,20,.08), 0 1px 3px rgba(58,43,20,.05);
  --sh-3: 0 14px 34px rgba(58,43,20,.14), 0 3px 10px rgba(58,43,20,.08);

  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1;      /* Figtree l/i disambiguation */
  letter-spacing: -.006em;
}

/* -------- base element idioms (scoped) -------- */
.alterview *{ box-sizing: border-box; }

.alterview h1,.alterview h2,.alterview h3,.alterview .display{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.alterview h1{ font-size: 34px; line-height: 1.12; font-weight: 500; }
.alterview h2{ font-size: 24px; line-height: 1.18; }
.alterview h3{ font-size: 19px; line-height: 1.25; }

.alterview .eyebrow{
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.alterview p{ margin: 0; line-height: 1.55; }
.alterview .lede{ font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.alterview small,.alterview .meta{ font-size: 12.5px; color: var(--muted); }
.alterview .num{ font-variant-numeric: tabular-nums; }

/* -------- buttons -------- */
.alterview .btn{
  font-family: var(--sans); font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.alterview .btn:active{ transform: translateY(.5px); }
.alterview .btn-primary{ background: var(--cta); color: var(--cta-ink); }
.alterview .btn-primary:hover{ background: var(--cta-hover); }
.alterview .btn-ghost{ background: transparent; color: var(--ink); border-color: var(--border-strong); }
.alterview .btn-ghost:hover{ background: var(--paper-2); }
.alterview .btn-soft{ background: var(--paper-2); color: var(--ink); border-color: var(--border-soft); }
.alterview .btn-soft:hover{ background: var(--paper-3); }
.alterview .btn-sm{ padding: 8px 13px; font-size: 13px; border-radius: var(--r-sm); }
.alterview .btn-lg{ padding: 14px 22px; font-size: 15.5px; }
.alterview .btn:focus-visible{ outline: 2px solid var(--verified); outline-offset: 2px; }

/* -------- cards / document surfaces -------- */
.alterview .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.alterview .well{ background: var(--paper-2); border: 1px solid var(--border-soft); border-radius: var(--r); }
.alterview .hr{ height: 1px; background: var(--border-soft); border: 0; margin: 0; }

/* -------- identity-verified badge (person OR org is who they claim) --------
   distinct from claim chips: a small rosette/seal, verified-green. */
.alterview .id-verified{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  color: var(--verified-ink);
  background: var(--verified-wash);
  border: 1px solid var(--verified-line);
  padding: 4px 10px 4px 8px; border-radius: 999px;
}
.alterview .id-verified .seal{
  width: 15px; height: 15px; border-radius: 999px; flex: 0 0 auto;
  background: var(--verified-mark);
  display: grid; place-items: center;
  color: #fff; font-size: 9px; font-weight: 700;
}

/* -------- phone + desktop presentation frames (for the gallery) -------- */
.frame-phone{
  width: 390px; border-radius: 42px; padding: 11px;
  background: #1c1712; box-shadow: 0 30px 70px rgba(40,28,10,.28);
  position: relative;
}
.frame-phone .screen{
  width: 368px; height: 800px; overflow: hidden;
  border-radius: 32px; background: var(--paper); position: relative;
}
.frame-desktop{
  width: 100%; max-width: 1180px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--sh-3); background: var(--surface);
}