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

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

/* Global reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }