/* ============================================================
   JG CAPITAL — Design Tokens V24
   Ultra-premium wealth management aesthetic.
   ============================================================ */

:root {
  color-scheme: light;

  /* ── Typography ────────────────────────────────────────── */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ── Core palette ───────────────────────────────────────── */
  --bg:      #fafaf9;
  --surface: #f2f1ef;
  --raised:  #ffffff;
  --ink:     #0d2231;
  --muted:   #4a6170;
  --line:    #dde3e7;

  /* ── Brand ──────────────────────────────────────────────── */
  --navy:    #072030;
  --navy-90: rgba(7, 32, 48, .9);
  --navy-60: rgba(7, 32, 48, .6);
  --accent:  #2e5c72;      /* primary interactive */
  --gold:    #b8976a;      /* secondary accent */
  --gold-lt: #d4b48a;
  --gold-dk: #956e3f;

  /* ── Semantic ───────────────────────────────────────────── */
  --positive: #1a9e5f;
  --negative: #d94a38;
  --warning:  #c47f1a;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(7, 32, 48, .06);
  --shadow-sm: 0 4px 12px rgba(7, 32, 48, .07), 0 1px 3px rgba(7, 32, 48, .04);
  --shadow-md: 0 8px 28px rgba(7, 32, 48, .09), 0 2px 8px rgba(7, 32, 48, .05);
  --shadow-lg: 0 20px 56px rgba(7, 32, 48, .11), 0 4px 16px rgba(7, 32, 48, .06);
  --shadow-xl: 0 40px 96px rgba(7, 32, 48, .13), 0 8px 24px rgba(7, 32, 48, .07);

  /* ── Blur / glass ───────────────────────────────────────── */
  --blur-nav:   saturate(160%) blur(14px);
  --blur-card:  saturate(140%) blur(10px);
  --blur-heavy: saturate(180%) blur(20px);

  /* ── Layout ─────────────────────────────────────────────── */
  --container:    1240px;
  --section:      clamp(56px, 6.5vw, 96px);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  9999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:          cubic-bezier(.25, 1, .5, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-expo:  cubic-bezier(.7, 0, .84, 0);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 520ms;
}

/* ── Dark mode ──────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:      #080f18;
  --surface: #0f1d2a;
  --raised:  #142435;
  --ink:     #e8f0f4;
  --muted:   #90aab8;
  --line:    #1e3444;

  --navy:    #071828;
  --navy-90: rgba(7, 24, 40, .9);
  --navy-60: rgba(7, 24, 40, .6);
  --accent:  #7fb5cc;
  --gold:    #c4a87a;
  --gold-lt: #d4b98c;
  --gold-dk: #a8874e;

  --positive: #3abf82;
  --negative: #f26b5a;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .18);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .14);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .16);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .34), 0 4px 16px rgba(0, 0, 0, .18);
  --shadow-xl: 0 40px 96px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .22);
}