/* ============================================================
   AniAni landing — design tokens
   ============================================================
   BLOCK A is a VERBATIM MIRROR of design/brand/tokens.css.
   design/brand/tokens.css is the single source of truth; this copy
   exists so landing/ deploys as a self-contained static directory.
   Do not hand-edit Block A. Re-copy from design/brand/tokens.css and
   run `node --test` — test/token_fidelity.test.mjs fails on any drift.

   BLOCK B is the landing-only layer: self-hosted brand fonts, font
   stacks with a system fallback, page widths, shadows, type sizes.
   ============================================================ */

/* ── BLOCK A — mirror of design/brand/tokens.css (do not hand-edit) ── */
/* AniAni design tokens v1 — hand-derived snapshot of
 * design/brand/AniAni Design System.dc.html ("Daylight" direction + Butil).
 * The canvas is the source of truth; edit there, then update this file.
 *
 * Fonts (Google Fonts):
 * https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Manrope:wght@400..800&display=swap
 */

:root {
  /* ── Color ─────────────────────────────────────────────── */
  --ani-ube: #5B3A9B;          /* actions, brand */
  --ani-ube-hover: #432B77;    /* link hover */
  --ani-ube-night: #3A2560;    /* dark sections (max one per screen) */
  --ani-gold: #F2B83B;         /* money, reward */
  --ani-ink: #2A1846;          /* text, outlines */
  --ani-cream: #FFFCF5;        /* canvas */
  --ani-sand: #F5EBD7;         /* fills */
  --ani-sand-border: #F0E6D2;  /* 1px borders */
  --ani-page: #F3EAD8;         /* outer page background */
  --ani-apoy: #E8531F;         /* boosts ONLY — flame never exceeds a badge */
  --ani-apoy-deep: #B23A0E;    /* eyebrows / section labels */
  --ani-apoy-soft: #FF8A5C;    /* APOY multiplier label on dark */
  --ani-paid: #2E9E5B;         /* success, receipts, PAID stamp */
  --ani-gcash: #2E63E7;        /* GCash payout mark only */
  --ani-lavender: #C7ADE8;     /* secondary text on ube */
  --ani-ube-wash: #EFE4FF;     /* pale ube fill: pills + badges on cream */
  --ani-body-muted: #5C5240;   /* body text */
  --ani-caption: #8A7A55;      /* captions, mono notes */
  --ani-disabled-text: #B3A88E;
  --ani-gold-ink: #8A5D00;     /* gold READ AS TEXT on cream — money labels under chart bars */
  --ani-lavender-muted: #9D86C9; /* tertiary text on ink (wallet hero meta) */
  --ani-on-gold: #8A5D00;      /* text on a gold panel (share card) */
  --ani-card: #FFFFFF;         /* raised card + field surface; cream is the canvas */
  --ani-gcash-wash: #EAF1FB;   /* "Uploading" status pill */
  --ani-cta-shadow: rgba(91, 58, 155, 0.28); /* sticky bars + primary CTAs only */

  /* ── Verdict cards (artboard 03 device benchmark; reused by 10 submissions)
     Sampled from the design file. Each is a tint of a palette colour the
     system already owns — paid, gold, apoy-deep — never a new hue. ──────── */
  --ani-verdict-pass-bg: #EAF7EF;
  --ani-verdict-pass-border: #BFE3CD;
  --ani-verdict-pass-title: #1D6B3E;
  --ani-verdict-pass-body: #41604D;
  --ani-verdict-limited-bg: #FBF3DC;
  --ani-verdict-limited-border: #ECD9A3;
  --ani-verdict-limited-badge: #B98A11;
  --ani-verdict-limited-title: #7A5C0D;
  --ani-verdict-limited-body: #6D5A25;
  --ani-verdict-blocked-bg: #FBEDEA;
  --ani-verdict-blocked-border: #F0C8BF;
  --ani-verdict-blocked-body: #8A4732;
  --ani-preview-stripe-a: #3A2560;
  --ani-preview-stripe-b: #332052;
  --ani-thumb-stripe-a: #E8DCC4;   /* thumbnail slot stripes (app 04, 09) */
  --ani-thumb-stripe-b: #E0D2B4;
  --ani-screen-border: #E8DCC4;

  /* ── Six-laws cards + spot illustrations (artboard 07 pre-record checklist)
     White card on cream is the artboard's own contrast step; the rest are the
     flat fills the six little scenes are drawn with. ────────────────────── */
  --ani-card-surface: #FFFFFF;
  --ani-paid-soft: #D2F2DF;    /* mono hint on the paid coach bar */
  --ani-gold-deep: #8A5D00;    /* sun outline + rays */
  --ani-illus-skin: #F4D9B8;   /* head, hands, body */
  --ani-illus-ghost: #B9C0C8;  /* the bystander who must not be there */
  --ani-illus-phone-dot: #8F87B3; /* home-button dot, law 2's little phone */
  /* ── Recording HUD (artboard 08). The one screen that is dark edge to
     edge, with the phone on the contributor's head: a ground below Ube
     Night, a panel fill for its pills and cards, and a muted text tone
     for the lines that must not compete with the timer. Sampled from the
     design file. ─────────────────────────────────────── */
  --ani-hud-night: #17102B;    /* recording HUD ground */
  --ani-hud-panel: #241B3D;    /* HUD pills, cards, status rows */
  --ani-hud-muted: #8F87B3;    /* secondary text on the HUD */
  --ani-hud-body: #E8DCC4;     /* HUD status-row body text */
  /* ── Submissions list (artboard 10) ──────────────────────────────────
     The white card face the artboard draws on the cream page, plus the two
     state-pill tints the palette did not already carry. ─────────────── */
  --ani-chip-upload-bg: #EAF1FB;  /* "Uploading 62%" pill */
  --ani-chip-upload-ink: #2E63E7; /* the artboard's progress blue; --ani-gcash stays the payout mark alone */
  --ani-chip-review-bg: #EFE4FF;  /* "In review" pill, and the active nav pill */
  /* ── Surfaces + external marks (app artboard 13 help) ──────────────────
     `surface` is the plain white card the app artboards set on cream, and
     `messenger` / `messenger-muted` are the Meta Messenger support card the
     help artboard paints. The Messenger blue is the same value as GCash blue,
     but it is a SEPARATE token on purpose: `--ani-gcash` stays the payout
     mark only, so a support card can never borrow the payout meaning. ──── */
  --ani-surface: #FFFFFF;
  --ani-messenger: #2E63E7;
  --ani-messenger-muted: #CDDCFA;

  /* Ratio rule: ~60% cream/sand, 30% ube family, 10% gold.
     Never set gold text on cream. Ink/cream 13.5:1, ube/cream 6.9:1,
     ink/gold 8.9:1 — all AA+. */

  /* ── Type ──────────────────────────────────────────────── */
  --ani-font-display: 'Archivo', sans-serif; /* Black 900, width 118–120% */
  --ani-font-body: 'Manrope', sans-serif;    /* 400 / 700 */
  --ani-font-numeric: ui-monospace, Menlo, monospace; /* countdowns, receipts, timestamps */

  --ani-display-size: 30px;    /* 30–36px, line 1.06, font-stretch 118–120% */
  --ani-display-line: 1.06;
  --ani-h2-size: 21px;         /* 21–24px, font-stretch 115% */
  --ani-eyebrow-size: 11px;    /* Archivo 800, +2.5px tracking, --ani-apoy-deep */
  --ani-eyebrow-tracking: 2.5px;
  --ani-body-size: 13.5px;     /* 12.5–14px, line 1.6 */
  --ani-body-line: 1.6;

  /* Peso amounts: always bold, always with ₱, never abbreviated under ₱10,000.
     Sentence case everywhere except wordmark, eyebrows, APOY/PAID stamps. */

  /* ── Shape ─────────────────────────────────────────────── */
  --ani-radius-pill: 999px;    /* buttons, chips */
  --ani-radius-card: 16px;
  --ani-radius-panel: 24px;
  --ani-radius-tag: 6px;
  --ani-radius-receipt: 12px;  /* receipt card: 1.5px dashed ink */

  /* ── Space (4px base) ──────────────────────────────────── */
  --ani-space-group: 8px;      /* within groups */
  --ani-space-sibling: 12px;   /* 12–16 between siblings */
  --ani-space-section: 28px;   /* between sections */
  --ani-border: 1px solid var(--ani-sand-border);
  --ani-hit-target: 44px;      /* minimum, full stop */

  /* ── Motion ────────────────────────────────────────────── */
  --ani-tap-squish: scale(0.97);   /* 120ms ease-out */
  --ani-tap-ms: 120ms;
  --ani-flame-loop: 1.1s;          /* apoy flame flick; countdowns tick flat */
  --ani-money-countup: 600ms;      /* odometer on peso totals; never fade in */
  --ani-butil-bob: 2.8s;           /* upload progress; never during form input */
  /* prefers-reduced-motion: keep ticks, kill loops and bursts. */
}

/* ── BLOCK B — landing-only layer (safe to edit) ───────────────── */

/* Self-hosted brand fonts (founder-authorized 2026-09-02). Local files only —
   the page still makes zero network requests beyond its own origin.
   OFL 1.1; provenance + sha256 pins in assets/fonts/README.md. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-var.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Font stacks: design families first (self-hosted above), system fallback
     after. */
  --landing-font-display: 'Archivo', 'Archivo Black', system-ui, -apple-system,
                          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --landing-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto,
                       'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  /* Widths: the 430px mobile shell and the 1180px desktop container are the
     exact frames the two exports draw
     (design/landing/AniAni Landing.dc.html / AniAni Landing Desktop.dc.html). */
  --landing-shell: 430px;
  --landing-shell-wide: 1180px;
  --landing-gutter: 20px;
  --landing-gutter-wide: 32px;

  /* Elevation. The ube CTA shadow is the token; the shell depth is the
     0 0 40px halo the mobile export draws around the cream column. */
  --landing-shadow-cta: 0 6px 18px var(--ani-cta-shadow);
  --landing-shadow-shell: 0 0 40px rgba(90, 60, 20, 0.12);

  /* Type sizes lifted from the two artboards. Mobile values are the floor;
     the -wide values apply at the desktop breakpoint (page styles). */
  --landing-h1: 33px;                       /* mobile hero */
  --landing-h1-wide: clamp(36px, 4.5vw, 54px);
  --landing-h2: 24px;                       /* mobile section heads */
  --landing-h2-wide: 32px;
  --landing-cta-h2: 27px;                   /* the ube signup panel heading */
  --landing-cta-h2-wide: 40px;
}