/* Design tokens — sourced from Figma file WFruppRtdeqVNOviDII5eF */
:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-brand-600: #5354D8;   /* SiGMA purple */
  --color-red-500: #EF4444;
  --color-yellow-400: #FACC15;
  --color-green-500: #22C55E;

  /* Neutrals (Tailwind-inspired; Figma file uses standard scale) */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Typography — family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography — sizes (px / line-height) */
  --text-xxs:           10px;
  --text-xxs-lh:        16px;
  --text-xs:            12px;
  --text-xs-lh:         18px;
  --text-sm:            14px;
  --text-sm-lh:         22px;
  --text-base:          16px;
  --text-base-lh:       24px;
  --text-lg:            18px;
  --text-lg-lh:         24px;
  --text-h3:            20px;
  --text-h3-lh:         26px;
  --text-mobile-h2:     32px;
  --text-mobile-h2-lh:  42px;

  /* Weights */
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Spacing scale (8pt 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;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Containers */
  --container-max: 1224px;
  --container-pad-desktop: 112px;
  --container-pad-mobile: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Dark-theme surfaces (page is dark navy throughout per Figma) */
:root {
  --color-bg:        #0B0F26;  /* page background */
  --color-surface:   #141A3A;  /* card / section surface */
  --color-surface-2: #1B2249;  /* nested surface */
  --color-border:    #2A325E;
  --color-text:      #FFFFFF;
  --color-text-muted:#9AA1C7;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }