/* ============================================================
   DGE3 Investment - Design Tokens
   vcdge3.com | 2026
   ============================================================ */

:root {
  /* --- Colors: Light --- */
  --c-bg:          #F9F9F7;
  --c-surface:     #F0F0ED;
  --c-surface-2:   #E8E8E4;
  --c-text:        #0D0D0B;
  --c-text-2:      #444440;
  --c-text-muted:  #888884;
  --c-accent:      #0057FF;
  --c-accent-dark: #0041CC;
  --c-accent-rgb:  0, 87, 255;
  --c-border:      rgba(13, 13, 11, 0.09);
  --c-border-2:    rgba(13, 13, 11, 0.15);
  --c-invert-bg:   #0C0C0A;
  --c-invert-text: #F0F0ED;
  --c-invert-muted:#888884;
  --c-invert-border: rgba(240, 240, 237, 0.10);

  /* --- Colors: Status --- */
  --c-active:  #00C48C;
  --c-exited:  #888884;
  --c-lead:    #0057FF;

  /* --- Typography --- */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Clash Display', 'Syne', 'Inter', sans-serif;

  /* --- Type Scale --- */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  2rem;        /* 32px */
  --text-4xl:  2.5rem;      /* 40px */
  --text-5xl:  3.25rem;     /* 52px */
  --text-6xl:  4.5rem;      /* 72px */
  --text-7xl:  6rem;        /* 96px */
  --text-8xl:  8rem;        /* 128px */

  /* --- Spacing --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Border Radius --- */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 9999px;

  /* --- Border --- */
  --border:   1px solid var(--c-border);
  --border-2: 1px solid var(--c-border-2);

  /* --- Motion --- */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-panel:  860ms;

  /* --- Layout --- */
  --nav-h:    64px;
  --max-w:    1280px;
  --col-gap:  clamp(var(--sp-6), 4vw, var(--sp-12));
  --page-px:  clamp(var(--sp-6), 5vw, var(--sp-16));
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --c-bg:          #0C0C0A;
  --c-surface:     #141412;
  --c-surface-2:   #1C1C1A;
  --c-text:        #F0F0ED;
  --c-text-2:      #C0C0BC;
  --c-text-muted:  #666662;
  --c-border:      rgba(240, 240, 237, 0.08);
  --c-border-2:    rgba(240, 240, 237, 0.14);
  --c-invert-bg:   #F9F9F7;
  --c-invert-text: #0D0D0B;
  --c-invert-muted:#444440;
  --c-invert-border: rgba(13, 13, 11, 0.10);
}