/* ============================================
   APEX Strategy — Design Tokens
   Linear-inspired dark minimal aesthetic
   ============================================ */

:root {
  /* ── Background Layers ── */
  --bg-primary:    #08090a;
  --bg-elevated:   #111214;
  --bg-surface:    #191b1f;
  --bg-hover:      #1e2024;

  /* ── Text Hierarchy ── */
  --text-primary:    #ededef;
  --text-secondary:  #9b9ba4;
  --text-tertiary:   #6b6b76;
  --text-quaternary: #4a4a52;

  /* ── Accent ── */
  --accent:          #8a8fff;
  --accent-dim:      rgba(138, 143, 255, 0.12);
  --accent-glow:     rgba(138, 143, 255, 0.25);

  /* ── Borders ── */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.1);
  --border-hover:    rgba(255, 255, 255, 0.15);

  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ── Spacing Scale ── */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* ── Radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ── Layout ── */
  --max-width: 1200px;
  --max-width-narrow: 720px;
}