/* ============================================================
   Hermes Exchange — Design Tokens
   Color + Type system (the foundation of the brand)
   ============================================================ */

:root {
  /* ---- Color: surfaces (warm-neutral black to sit under the gold mark) ---- */
  --bg-0: #0A0A0C;          /* page background — deep warm-neutral black */
  --bg-1: #15141A;          /* card surface — one tone lighter */
  --bg-2: #1B1A22;          /* raised / hover surface */
  --bg-inset: #100F14;      /* inset wells (inputs, code) */

  /* ---- Color: brand gold (sampled from the logo) ---- */
  --gold: #DBA833;          /* PRIMARY accent — CTA, links, brand. Logo body gold */
  --gold-300: #ECC75A;      /* lighter — hover lift */
  --gold-hi: #FBE779;       /* highlight — gradient top / sheen */
  --gold-600: #C2922A;      /* pressed / darker */
  --gold-700: #8A6A1A;      /* deep bronze shadow */
  --gold-soft: rgba(219, 168, 51, 0.12);
  --gold-glow: rgba(219, 168, 51, 0.32);
  --gold-ink: #241902;      /* text on a gold fill */

  /* ---- mint family aliased to gold so all brand-accent usages repaint ---- */
  --mint: var(--gold);
  --mint-600: var(--gold-600);
  --mint-soft: var(--gold-soft);
  --mint-glow: var(--gold-glow);

  /* ---- Color: text (warmed slightly) ---- */
  --fg-1: #FBF8F2;          /* primary text — warm white */
  --fg-2: #A39E94;          /* secondary text — warm grey */
  --fg-3: #6A655C;          /* tertiary / disabled */

  /* ---- Color: lines ---- */
  --line: #2A2733;          /* borders / dividers */
  --line-soft: #201E27;

  /* ---- Semantic (green kept ONLY for up / savings) ---- */
  --up: #34C58C;            /* emerald — "you save" / better rate */
  --up-soft: rgba(52, 197, 140, 0.12);
  --down: #FF6B6B;

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale (desktop) ---- */
  --h1: 64px;
  --h2: 40px;
  --h3: 24px;
  --body: 16px;
  --small: 14px;
  --micro: 12px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Spacing rhythm ---- */
  --gap: 16px;
  --pad-section: 120px;   /* vertical section padding (desktop) */
  --maxw: 1200px;

  /* ---- Shadows / elevation ---- */
  --sh-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.35);
  --sh-pop: 0 20px 60px rgba(0,0,0,0.55);
  --sh-mint: 0 8px 30px rgba(219, 168, 51, 0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur: 400ms; /* @kind other */
}

@media (max-width: 768px) {
  :root {
    --h1: 36px;
    --h2: 28px;
    --h3: 20px;
    --pad-section: 72px;
  }
}