/* File: css/tokens.css
   Purpose: Design tokens (CSS custom properties) for NikaTS V2 UI.
   Notes: All visual constants are defined here. Pages and components only reference these tokens.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* ── Backgrounds ── */
  --bg-base:       #080b0f;
  --bg-surface:    #0f1318;
  --bg-surface-2:  #161b22;
  --bg-surface-3:  #1c2129;
  --bg-overlay:    rgba(0, 0, 0, 0.65);

  /* ── Borders ── */
  --border-subtle:  #1e2530;
  --border-default: #2a3140;
  --border-strong:  #3a4555;

  /* ── Text ── */
  --text-primary:   #e8ecf1;
  --text-secondary: #8b95a5;
  --text-muted:     #5c6573;
  --text-inverse:   #080b0f;

  /* ── Brand ── */
  --brand-primary:   #4f8cff;
  --brand-secondary: #8a5bff;
  --brand-gradient:  linear-gradient(135deg, #4f8cff 0%, #8a5bff 100%);

  /* ── Trading Semantic ── */
  --color-long:         #22c55e;
  --color-long-subtle:  rgba(34, 197, 94, 0.12);
  --color-long-border:  rgba(34, 197, 94, 0.40);
  --color-long-text:    #6ee7b7;

  --color-short:        #ef4444;
  --color-short-subtle: rgba(239, 68, 68, 0.12);
  --color-short-border: rgba(239, 68, 68, 0.40);
  --color-short-text:   #fca5a5;

  --color-neutral:        #64748b;
  --color-neutral-subtle: rgba(100, 116, 139, 0.12);
  --color-neutral-border: rgba(100, 116, 139, 0.35);

  /* ── Status ── */
  --color-success:        #22c55e;
  --color-success-subtle: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.40);

  --color-warning:        #f59e0b;
  --color-warning-subtle: rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.45);

  --color-danger:         #ef4444;
  --color-danger-subtle:  rgba(239, 68, 68, 0.12);
  --color-danger-border:  rgba(239, 68, 68, 0.40);

  --color-info:           #3b82f6;
  --color-info-subtle:    rgba(59, 130, 246, 0.12);
  --color-info-border:    rgba(59, 130, 246, 0.40);

  /* ── Chart / allocation palette (M-03) ── */
  --chart-color-1: #60a5fa;
  --chart-color-2: #f59e0b;
  --chart-color-3: #10b981;
  --chart-color-4: #f97316;
  --chart-color-5: #a855f7;
  --chart-color-other: #64748b;

  /* ── Interactive ── */
  --focus-ring:     0 0 0 2px rgba(79, 140, 255, 0.45);
  --hover-overlay:  rgba(255, 255, 255, 0.04);

  /* ── Typography ── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.4375rem;  /* 23px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.0625rem;  /* 33px */

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing ── */
  --space-0:  0;
  --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;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.55);

  /* ── Transitions ── */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-Index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     9999;
  --z-toast:     10000;

  /* ── Timeframe Colors ── */
  --tf-1m:  rgba(14, 165, 233, 0.22);   --tf-1m-text:  #7dd3fc;
  --tf-3m:  rgba(56, 189, 248, 0.22);   --tf-3m-text:  #bae6fd;
  --tf-5m:  rgba(37, 99, 235, 0.22);    --tf-5m-text:  #93c5fd;
  --tf-15m: rgba(34, 197, 94, 0.22);    --tf-15m-text: #86efac;
  --tf-30m: rgba(132, 204, 22, 0.22);   --tf-30m-text: #bef264;
  --tf-1h:  rgba(245, 158, 11, 0.22);   --tf-1h-text:  #fcd34d;
  --tf-2h:  rgba(249, 115, 22, 0.22);   --tf-2h-text:  #fdba74;
  --tf-4h:  rgba(239, 68, 68, 0.22);    --tf-4h-text:  #fca5a5;
  --tf-6h:  rgba(225, 29, 72, 0.22);    --tf-6h-text:  #fda4af;
  --tf-8h:  rgba(236, 72, 153, 0.22);   --tf-8h-text:  #f9a8d4;
  --tf-12h: rgba(20, 184, 166, 0.22);   --tf-12h-text: #5eead4;
  --tf-1d:  rgba(16, 185, 129, 0.22);   --tf-1d-text:  #6ee7b7;
  --tf-1w:  rgba(34, 211, 238, 0.22);   --tf-1w-text:  #67e8f9;
}