/* ============================================================
   NEXUS AI PARTNERS — Design Tokens
   Copied from root colors_and_type.css for standalone deployment.
   ============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=cabinet-grotesk@300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ---------- COLOR · primary ---------- */
  --apex-black:          #080808;
  --apex-white:          #f5f2eb;
  --apex-lime:           #e8ff47;
  --apex-teal:           #47ffc8;

  /* ---------- COLOR · surface ---------- */
  --apex-surface-1:      #111111;
  --apex-surface-2:      #181818;
  --apex-surface-3:      #222222;

  /* ---------- COLOR · border ---------- */
  --apex-border-default: #1e1e1e;
  --apex-border-hover:   #333333;
  --apex-border-focus:   #e8ff47;

  /* ---------- COLOR · text ---------- */
  --apex-text-primary:   #f5f2eb;
  --apex-text-secondary: #888880;
  --apex-text-muted:     #555550;
  --apex-text-inverse:   #080808;

  /* ---------- COLOR · semantic ---------- */
  --apex-danger:         #f54242;
  --apex-success:        #47ffc8;
  --apex-warning:        #f5a842;

  /* ---------- TYPE · families ---------- */
  --font-display: "Clash Display", "Syne", system-ui, sans-serif;
  --font-body:    "Cabinet Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- TYPE · scale ---------- */
  --text-display-xl: 88px;
  --text-display-lg: 64px;
  --text-h1:         44px;
  --text-h2:         32px;
  --text-h3:         24px;
  --text-h4:         20px;
  --text-body-lg:    18px;
  --text-body-md:    16px;
  --text-body-sm:    14px;
  --text-label-lg:   12px;
  --text-label-sm:   10px;
  --text-caption:    12px;

  /* ---------- SPACE · 4px base grid ---------- */
  --space-1:   4px;  --space-2:   8px;  --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;

  /* ---------- RADIUS ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ---------- ELEVATION (border-driven) ---------- */
  --elev-0-border: #1e1e1e;  --elev-0-bg: #111111;
  --elev-1-border: #2a2a2a;  --elev-1-bg: #111111;
  --elev-2-border: #333333;  --elev-2-bg: #151515;
  --elev-3-border: #444444;  --elev-3-bg: #1a1a1a;

  /* ---------- MOTION ---------- */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;
  --duration-enter:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-enter:   cubic-bezier(0, 0, 0.2, 1);
  --easing-exit:    cubic-bezier(0.4, 0, 1, 1);

  --stagger-step: 80ms;

  /* ---------- LAYOUT GRID ---------- */
  --grid-max:        1280px;
  --grid-gutter:       24px;
  --grid-side-pad:     80px;
  --grid-cols:           12;
}