/* ─────────────────────────────────────────────────────────────────
   MOA Venture Partners — Design Tokens
   Color & Typography foundations
   ─────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ── Brand ─────────────────────────────────────────────────── */
  --moa-amber:        #FFB739;          /* primary accent              */
  --moa-amber-2:      #FBB03B;          /* deeper amber (gradient)     */
  --moa-amber-soft:   rgba(255,183,57,.12);
  --moa-amber-line:   rgba(255,183,57,.25);
  --moa-amber-glow:   rgba(255,183,57,.18);

  /* ── Surfaces (dark canvas) ────────────────────────────────── */
  --bg-canvas:        #000000;          /* page background            */
  --bg-elevated:      #0D0D0D;          /* inactive inputs / inset    */
  --bg-surface:       #141414;          /* card surface               */
  --bg-surface-2:     #15151A;          /* alt card surface           */
  --bg-overlay:       rgba(255,255,255,.02);
  --bg-overlay-2:     rgba(255,255,255,.05);

  /* ── Borders & Dividers ────────────────────────────────────── */
  --border-faint:     #1F1F1F;          /* hairline divider           */
  --border-default:   #2A2A2A;          /* default border             */
  --border-strong:    #3A3A3A;          /* stronger border            */

  /* ── Foreground (text) ─────────────────────────────────────── */
  --fg-primary:       #FFFFFF;          /* headlines, key labels      */
  --fg-secondary:     #E8E8E8;          /* body emphasis, strong text */
  --fg-tertiary:      #A8A8A8;          /* secondary body             */
  --fg-muted:         #6B6B6B;          /* captions, meta             */
  --fg-faint:         #757575;          /* placeholder, disabled      */
  --fg-on-amber:      #000000;          /* text on amber buttons      */

  /* ── Status ────────────────────────────────────────────────── */
  --success:          #4ADE80;          /* confirmed / visible        */
  --success-2:        #57C667;
  --success-soft:     rgba(74,222,128,.10);
  --success-line:     rgba(74,222,128,.30);

  --danger:           #FF5151;          /* no-show / errors           */
  --danger-soft:      rgba(255,81,81,.10);
  --danger-line:      rgba(255,81,81,.25);

  --gold:             #E6C702;          /* % match badge              */
  --warn:             #F59E0B;          /* attention                  */
  --info:             #60A5FA;          /* informational              */

  /* ── Type families ─────────────────────────────────────────── */
  --font-sans:        "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* `--font-mono` keeps the name for backwards-compat with markup that calls it,
     but the family is Poppins — MOA does not use a monospaced face. Numeric
     contexts rely on Poppins's tabular figures via `font-feature-settings: 'tnum'`. */
  --font-mono:        "Poppins", "Inter", system-ui, -apple-system, sans-serif;

  /* ── Type scale (Poppins) ──────────────────────────────────── */
  --fs-display:       32px;             /* hero / page title          */
  --fs-h1:            26px;
  --fs-h2:            20px;
  --fs-h3:            17px;
  --fs-h4:            14px;
  --fs-body:          14px;
  --fs-body-sm:       13px;
  --fs-caption:       12.5px;
  --fs-meta:          12px;
  --fs-micro:         11.5px;
  --fs-eyebrow:       11px;             /* uppercase / tracked        */
  --fs-tag:           10px;             /* match badge / tag labels   */

  /* ── Weights ───────────────────────────────────────────────── */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* ── Letter-spacing ────────────────────────────────────────── */
  --tracking-tight:   -0.8px;
  --tracking-snug:    -0.5px;
  --tracking-normal:   0;
  --tracking-wide:     0.5px;
  --tracking-wider:    1px;
  --tracking-widest:   2px;             /* eyebrow / category labels  */

  /* ── Line heights ──────────────────────────────────────────── */
  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.5;
  --lh-relaxed:       1.6;

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-xs:             4px;
  --r-sm:             8px;
  --r-md:             10px;
  --r-lg:             12px;
  --r-xl:             14px;
  --r-2xl:            16px;
  --r-3xl:            18px;
  --r-pill:           999px;

  /* ── Spacing scale ─────────────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-7:          28px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;

  /* ── Elevation / shadow ────────────────────────────────────── */
  --shadow-none:      0 0 0 0 transparent;
  --shadow-glow-amber:0 8px 32px 0 rgba(255,183,57,.18);
  --shadow-ring-amber:0 0 0 6px rgba(255,183,57,.15);
  --shadow-soft:      0 4px 20px 0 rgba(0,0,0,.35);

  /* Material Design elevation scale (dp 0 → 5). Pair `--elev-N`
     with `--surface-tint-N` on dark theme for the layered look. */
  --elev-0:           none;
  --elev-1:           0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2:           0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3:           0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.30);
  --elev-4:           0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.30);
  --elev-5:           0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.30);

  --surface-tint-0:   var(--bg-canvas);
  --surface-tint-1:   var(--bg-surface);
  --surface-tint-2:   var(--bg-surface-2);
  --surface-tint-3:   var(--bg-surface-2);
  --surface-tint-4:   var(--bg-surface-2);
  --surface-tint-5:   var(--bg-surface-2);

  /* ── State layers (Material interaction overlays) ──────────── */
  --state-hover:           rgba(255,255,255,.08);
  --state-focus:           rgba(255,255,255,.12);
  --state-pressed:         rgba(255,255,255,.12);
  --state-dragged:         rgba(255,255,255,.16);
  --state-disabled:        .38;                       /* opacity on fg/bg */
  --state-hover-on-amber:  rgba(0,0,0,.08);
  --state-pressed-on-amber:rgba(0,0,0,.12);

  /* ── Responsive breakpoints (mobile-first) ─────────────────── */
  --bp-sm:            480px;
  --bp-md:            768px;
  --bp-lg:           1024px;
  --bp-xl:           1280px;
  --bp-2xl:          1536px;
}

/* ─────────────────────────────────────────────────────────────────
   Semantic element styles — apply to bare tags inside .moa-prose
   ─────────────────────────────────────────────────────────────── */
.moa-prose,
.moa-prose * {
  font-family: var(--font-sans);
  color: var(--fg-secondary);
}

.moa-prose h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}
.moa-prose h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}
.moa-prose h3 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--fg-primary);
}
.moa-prose h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--fg-primary);
}
.moa-prose p,
.moa-prose .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}
.moa-prose .eyebrow,
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--moa-amber);
}
.moa-prose code,
.moa-prose .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-secondary);
}

/* ── Utility tag/pill ─────────────────────────────────────────── */
.moa-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--moa-amber-soft);
  border: 1px solid var(--moa-amber-line);
  font: var(--fw-bold) var(--fs-tag)/15px var(--font-sans);
  letter-spacing: var(--tracking-wider);
  color: var(--moa-amber);
}
.moa-tag--success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.moa-tag--danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger);  }
.moa-tag--gold    { background: var(--moa-amber-soft); border-color: var(--moa-amber-line); color: var(--gold); }
.moa-tag--neutral { background: transparent;          border-color: var(--border-default); color: var(--fg-tertiary); }

/* ── Utility button ───────────────────────────────────────────── */
.moa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--moa-amber);
  color: var(--fg-on-amber);
  border: none;
  font: var(--fw-bold) var(--fs-body-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.moa-btn:hover  { filter: brightness(1.05); }
.moa-btn:active { transform: scale(.985); }
.moa-btn--ghost {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--fg-primary);
}
.moa-btn--lg { height: 45px; padding: 0 24px; font-size: var(--fs-body); border-radius: var(--r-sm); }
.moa-btn--sm { height: 29px; padding: 0 13px; border-radius: var(--r-pill); font-size: var(--fs-meta); }