/* Spick Design Tokens — Binance-inspired dark + yellow */
:root {
  /* Brand & Accent */
  --color-primary: #FCD535;
  --color-primary-active: #f0b90b;
  --color-primary-disabled: #3a3a1f;

  /* Surface — Dark (default) */
  --color-canvas: #0b0e11;
  --color-surface-card: #1e2329;
  --color-surface-elevated: #2b3139;

  /* Surface — Light (transactional / footer) */
  --color-canvas-light: #ffffff;
  --color-surface-soft-light: #fafafa;
  --color-surface-strong-light: #f5f5f5;

  /* Hairlines & Borders */
  --color-hairline-on-dark: #2b3139;
  --color-hairline-on-light: #eaecef;
  --color-border-strong: #cdd1d6;

  /* Text */
  --color-ink: #181a20;
  --color-body: #eaecef;
  --color-body-on-light: #181a20;
  --color-muted: #707a8a;
  --color-muted-strong: #929aa5;
  --color-on-primary: #181a20;
  --color-on-dark: #ffffff;

  /* Semantic (trading) */
  --color-up: #0ecb81;
  --color-down: #f6465d;
  --color-info: #3b82f6;

  /* Typography stacks (BinanceNova/Plex fallback) */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --font-number: "JetBrains Mono", "IBM Plex Mono", "Menlo", "Consolas", monospace;

  /* Type scale */
  --fs-hero-display: 64px;
  --fs-display-lg: 48px;
  --fs-display-md: 40px;
  --fs-display-sm: 32px;
  --fs-title-lg: 24px;
  --fs-title-md: 20px;
  --fs-title-sm: 16px;
  --fs-number-display: 40px;
  --fs-number-md: 16px;
  --fs-number-sm: 14px;
  --fs-body-md: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-button: 14px;
  --fs-nav: 14px;

  /* Spacing scale */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* Radius */
  --rad-xs: 2px;
  --rad-sm: 4px;
  --rad-md: 6px;
  --rad-lg: 8px;
  --rad-xl: 12px;
  --rad-pill: 9999px;

  /* Container */
  --container-max: 1280px;

  /* Motion */
  --easing-standard: cubic-bezier(.2, 0, .2, 1);
  --motion-fast: 120ms;
  --motion-base: 180ms;
}