/* ============================================================
   EVERSEAL — iOS Design System · Design Tokens
   Calibrated to the EverSeal Brand Guidelines
   Deep green · bronze · platinum · serif display
   "Verified Beginnings. Curated Opportunities."
   ============================================================ */

:root {
  /* ---- Brand palette (from brand guidelines) -----------
     Primary:   Ever Deep Green  #1d3a2d
                Platinum Mist    #e4e5e1
     Secondary: Heritage Sage    #5d7659
                Muted Bronze     #b8997a                      */

  /* Ever Deep Green — primary brand / action color */
  --es-green: #1d3a2d;
  --es-green-press: #142a20;     /* pressed / active */
  --es-green-soft: #E7EEE9;      /* tinted surface */
  --es-green-border: #C7D7CC;
  --es-green-deep: #122017;      /* near-black green for seals/headers */

  /* Heritage Sage — secondary green */
  --es-sage: #5d7659;
  --es-sage-soft: #EBF0EA;

  /* Muted Bronze — premium / verification accent (the trust anchor) */
  --es-bronze: #a07b56;          /* slightly deepened #b8997a for AA text */
  --es-bronze-tint: #b8997a;     /* the literal brand bronze, for fills/edges */
  --es-bronze-press: #87653f;
  --es-bronze-soft: #F4ECE2;
  --es-bronze-border: #E2D2BF;

  /* Platinum Mist — signature light neutral */
  --es-platinum: #e4e5e1;

  /* ---- Legacy aliases ----------------------------------
     Existing components reference --es-blue* (primary) and
     --es-gold* (verified accent). Remap them onto the brand
     palette so every component re-skins automatically. */
  --es-blue: var(--es-green);
  --es-blue-press: var(--es-green-press);
  --es-blue-soft: var(--es-green-soft);
  --es-blue-border: var(--es-green-border);

  --es-gold: var(--es-bronze);
  --es-gold-press: var(--es-bronze-press);
  --es-gold-soft: var(--es-bronze-soft);
  --es-gold-border: var(--es-bronze-border);

  /* ---- Ink (text) — warm green-charcoal ---------------- */
  --es-ink: #18221D;           /* primary label */
  --es-ink-2: #54605A;         /* secondary label */
  --es-ink-3: #868F88;         /* tertiary / placeholder */
  --es-ink-4: #B4BAB4;         /* quaternary / disabled glyph */
  --es-on-color: #FFFFFF;      /* text on green/bronze */

  /* ---- Surfaces & background --------------------------- */
  --es-bg: #FFFFFF;            /* base */
  --es-bg-grouped: #F1F2EE;    /* grouped page background (platinum-tinted) */
  --es-surface: #FFFFFF;       /* card / sheet */
  --es-surface-2: #F7F8F3;     /* subtle raised fill */
  --es-fill: #ECEEE7;          /* input / control fill */
  --es-fill-press: #E0E3D9;
  --es-scrim: rgba(18,32,23,0.46); /* modal backdrop */

  /* ---- Seal surfaces (dark brand canvas) --------------- */
  --es-seal-bg: #142a20;
  --es-seal-grad: linear-gradient(160deg, #234534 0%, #122017 100%);

  /* ---- Lines ------------------------------------------- */
  --es-separator: rgba(18,32,23,0.09);
  --es-separator-strong: rgba(18,32,23,0.16);
  --es-hairline: 0.5px;

  /* ---- Semantic ---------------------------------------- */
  --es-success: #2A8C5A;
  --es-success-soft: #E3F2E9;
  --es-warning: #C68A2E;
  --es-warning-soft: #F8EFDD;
  --es-danger: #C0432F;
  --es-danger-soft: #F8E8E4;

  /* ---- Radius (medium / iOS continuous-ish) ------------ */
  --es-r-xs: 8px;
  --es-r-sm: 10px;
  --es-r-md: 12px;
  --es-r-lg: 16px;
  --es-r-xl: 20px;
  --es-r-2xl: 26px;
  --es-r-pill: 999px;

  /* ---- Spacing scale (4pt grid) ------------------------ */
  --es-s1: 4px;
  --es-s2: 8px;
  --es-s3: 12px;
  --es-s4: 16px;
  --es-s5: 20px;
  --es-s6: 24px;
  --es-s8: 32px;
  --es-s10: 40px;
  --es-s12: 48px;

  /* ---- Elevation --------------------------------------- */
  --es-shadow-1: 0 1px 2px rgba(18,32,23,0.05), 0 1px 1px rgba(18,32,23,0.04);
  --es-shadow-2: 0 2px 8px rgba(18,32,23,0.07), 0 1px 2px rgba(18,32,23,0.04);
  --es-shadow-3: 0 8px 24px rgba(18,32,23,0.12), 0 2px 6px rgba(18,32,23,0.06);
  --es-shadow-sheet: 0 -8px 40px rgba(18,32,23,0.18);

  /* ---- Type families ----------------------------------
     Functional UI runs on the system sans (iOS HIG fidelity).
     The brand layer — wordmark, hero, section + display
     titles — is set in the brand serif (Times New Roman /
     Tinos), per the guidelines. */
  --es-font: -apple-system, "SF Pro Text", "SF Pro Display", "SF Pro",
             system-ui, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --es-serif: "Times New Roman", "Tinos", "Noto Serif KR", "Nanum Myeongjo",
              Georgia, serif;

  /* iOS HIG type ramp (size / line-height / weight / tracking) */
  --es-t-large-title: 700 34px/41px var(--es-font);
  --es-t-title-1: 700 28px/34px var(--es-font);
  --es-t-title-2: 700 22px/28px var(--es-font);
  --es-t-title-3: 600 20px/25px var(--es-font);
  --es-t-headline: 600 17px/22px var(--es-font);
  --es-t-body: 400 17px/24px var(--es-font);
  --es-t-callout: 400 16px/21px var(--es-font);
  --es-t-subhead: 400 15px/20px var(--es-font);
  --es-t-footnote: 400 13px/18px var(--es-font);
  --es-t-caption-1: 400 12px/16px var(--es-font);
  --es-t-caption-2: 500 11px/13px var(--es-font);

  /* Brand serif display ramp (marketing / hero / section titles) */
  --es-t-display: 400 52px/1.04 var(--es-serif);
  --es-t-serif-1: 400 34px/1.12 var(--es-serif);
  --es-t-serif-2: 400 26px/1.18 var(--es-serif);
  --es-t-serif-3: 400 21px/1.3 var(--es-serif);
}