/* Design Tokens — JayLia Programming */

:root {
  /* Primary palette */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* C6 Debugger accent (orange) */
  --color-accent-300: #FFD19A;
  --color-accent-400: #FFB459;
  --color-accent-500: #FF7A3E;
  --color-accent-600: #FF6A2E;

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

  /* Semantic (light theme defaults) */
  --bg:            #ffffff;
  --bg-alt:        var(--color-gray-50);
  --bg-card:       #ffffff;
  --text:          var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted:    var(--color-gray-400);
  --border:        var(--color-gray-200);
  --primary:       var(--color-primary-500);
  --primary-hover: var(--color-primary-600);
  --primary-light: var(--color-primary-50);
  --accent:        var(--color-accent-500);
  --accent-hover:  var(--color-accent-600);
  --accent-light:  #fff7ed;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Typography */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'Consolas', 'Courier New', monospace;
  --text-xs:    .75rem;
  --text-sm:    .875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --header-height: 64px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Dark theme */
[data-theme="dark"] {
  --bg:            #121217;
  --bg-alt:        #1a1a22;
  --bg-card:       #1e1e28;
  --text:          #f0f0f5;
  --text-secondary: #a0a0b0;
  --text-muted:    #606070;
  --border:        #2a2a38;
  --primary:       var(--color-primary-400);
  --primary-hover: var(--color-primary-300);
  --primary-light: rgba(59,130,246,.12);
  --accent:        var(--color-accent-400);
  --accent-hover:  var(--color-accent-300);
  --accent-light:  rgba(255,122,62,.12);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.3);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
}