/* Design System Tokens — box-go-gin-sveltekit */

/* Dark theme (default) */
:root, [data-theme="dark"] {
  /* Colors */
  --color-bg:          #0f0f0f;
  --color-surface:     #161616;
  --color-surface-2:   #1e1e1e;
  --color-border:      #222222;
  --color-border-2:    #2a2a2a;

  --color-accent:      #6366f1;
  --color-accent-dim:  #1e1e2e;
  --color-accent-border: #2a2a4a;

  --color-text:        #e5e5e5;
  --color-text-2:      #888888;
  --color-text-3:      #555555;
  --color-text-4:      #444444;

  --color-success:     #4ade80;
  --color-error:       #f87171;
  --color-warning:     #fbbf24;

  /* Spacing */
  --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;

  /* Typography */
  --font-xs:   0.72rem;
  --font-sm:   0.82rem;
  --font-base: 0.9rem;
  --font-md:   1rem;
  --font-lg:   1.1rem;
  --font-xl:   1.4rem;
  --font-2xl:  1.75rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 100px;

  /* Transitions */
  --transition: 0.15s ease;
}

/* Light theme */
[data-theme="light"] {
  --color-bg:          #f8f9fa;
  --color-surface:     #ffffff;
  --color-surface-2:   #f1f3f5;
  --color-border:      #dee2e6;
  --color-border-2:    #ced4da;

  --color-accent:      #4f46e5;
  --color-accent-dim:  #eef2ff;
  --color-accent-border: #c7d2fe;

  --color-text:        #1a1a2e;
  --color-text-2:      #495057;
  --color-text-3:      #868e96;
  --color-text-4:      #adb5bd;

  --color-success:     #16a34a;
  --color-error:       #dc2626;
  --color-warning:     #d97706;
}