/* ============================================================
   tokens.css — Golden Invest Group design tokens (FE-01)
   ------------------------------------------------------------
   Single source of truth for the visual identity, extracted from
   the donor Webflow site (repo-root index.html + assets/css/style.css
   `:root` block). Shared by BOTH rendering surfaces:
     - Worker SSR public pages (worker/src/public/pages/*.tsx)
     - React SPA on Pages (frontend/, member + admin areas)
   Theme: LIGHT design-system variant (architecture.md §2.2).
   Components must reference variables — never raw hex values.
   ============================================================ */

:root,
:root[data-theme="light"] {
  /* ---- Donor palette (verbatim from donor :root) ---------- */
  --black: #0a0a0a;          /* donor --black  — primary ink   */
  --white: #f9f7f4;          /* donor --white  — warm ivory bg */
  --main-gold: #a07333;      /* donor --main-gold — brand      */
  --light-gold: #d1b000;     /* donor --lught-gold (sic)       */
  --green: #32965d;          /* donor --green                  */
  --purple: #9b7ede;         /* donor --purple                 */
  --black-60: #6a6968;       /* donor --black-06 — muted ink   */
  --white-pure: #ffffff;     /* pure white — hero primary CTA  */

  /* ---- Design-system mapping (light variant) -------------- */
  --bg-primary: var(--white);
  --bg-secondary: #f3efe9;             /* one step warmer/darker than bg */
  --surface: var(--white);
  --surface-elevated: #fffdfa;
  --border: rgba(10, 10, 10, 0.12);
  --border-gold: rgba(160, 115, 51, 0.5);   /* donor #a0733380 header rule  */
  --border-gold-strong: rgba(160, 115, 51, 0.8); /* donor #a07333cc footer rule */
  --text-primary: var(--black);
  --text-secondary: rgba(10, 10, 10, 0.8);  /* donor #0a0a0acc */
  --text-tertiary: rgba(10, 10, 10, 0.6);   /* donor #0a0a0a99 */
  --text-inverted: var(--white);
  --brand-accent: var(--main-gold);
  --brand-accent-hover: #8a6229;            /* main-gold darkened for hover/AA */
  --focus-ring: #8a6229;                    /* 5.09:1 on ivory; AA-safe brand gold */
  --success: var(--green);
  --warning: #b45309;
  --error: #b3261e;

  /* ---- Admin system extensions ---------------------------- */
  /* These keep SPA surfaces aligned with the donor's 4px rhythm. */
  --space-5: 20px;
  --space-7: 28px;
  --control-height: 44px;
  --border-subtle: rgba(10, 10, 10, 0.08);
  --surface-hover: rgba(160, 115, 51, 0.06);
  --status-success-bg: rgba(50, 150, 93, 0.1);
  --status-error-bg: rgba(179, 38, 30, 0.08);
  --overlay-backdrop: rgba(10, 10, 10, 0.55);

  /* Compliance surfaces (FE-01: legal-review watermark + mock marker) */
  --legal-review-ink: #8a6229;
  --legal-review-bg: rgba(160, 115, 51, 0.08);
  --mock-ink: #7c2d12;
  --mock-bg: #fff7ed;
  --mock-border: #fdba74;

  /* ---- Typography (donor: Cinzel display / Poppins body) --- */
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;

  --text-h1-size: 56px;  --text-h1-line: 68px;   /* Cinzel 700 */
  --text-h2-size: 40px;  --text-h2-line: 52px;   /* Cinzel 700 */
  --text-h3-size: 32px;  --text-h3-line: 40px;   /* Poppins 500 */
  --text-h4-size: 28px;  --text-h4-line: 40px;   /* Poppins 500 */
  --text-h5-size: 22px;  --text-h5-line: 32px;   /* Poppins 500 */
  --text-h6-size: 16px;  --text-h6-line: 32px;   /* Poppins 500 */
  --text-body-size: 16px; --text-body-line: 28px; /* Poppins 400 */
  --text-label-size: 14px; --text-label-line: 20px; /* Poppins 400 */

  /* ---- Spacing (donor utility grid: 4px base) -------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Layout ---------------------------------------------- */
  --content-max: 1600px;               /* donor .max--w--1600 */
  --page-pad-x: 48px;                  /* donor padding--lr--48px */
  --header-height: 64px;               /* 40px logo + 2x12px pad */

  /* ---- Shape (donor is sharp-cornered; radius reserved) ---- */
  --radius-none: 0;                    /* donor buttons/fields are square */
  --radius-small: 4px;
  --radius-round: 100px;               /* donor .logo.round, dots */

  /* ---- Motion (donor site.css curves) ---------------------- */
  --ease-swap: cubic-bezier(0.4, 0, 0.2, 1);   /* button text swap .45s */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* .wf-fx reveal .8s */
  --dur-hover: 150ms;
  --dur-swap: 450ms;
  --dur-reveal: 800ms;

  /* ---- Elevation (light theme: subtle, no glassmorphism) --- */
  --shadow-card: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-nav: 0 8px 50px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 991px) {
  :root,
  :root[data-theme="light"] {
    --text-h1-size: 42px; --text-h1-line: 56px;  /* donor 991px override */
    --page-pad-x: 24px;
  }
}

@media screen and (max-width: 479px) {
  :root,
  :root[data-theme="light"] {
    --text-h1-size: 34px; --text-h1-line: 44px;
    --text-h2-size: 32px; --text-h2-line: 42px;
    --page-pad-x: 16px;
  }
}