// [REQ V1]  System projektowania – tokeny kolorów, typografii i spacingu jako zmienne SCSS
// [REQ V2]  Responsywność – breakpointy $bp-sm / $bp-md / $bp-lg używane w całej aplikacji
// [REQ V5]  Motyw ciemny – zmienne --color-bg / --color-text nadpisywane przez [data-theme="dark"]

// Color Palette
$primary-900: #0a2540;
$primary-800: #0d3360;
$primary-700: #1a4a7a;
$primary-600: #1e5f9a;
$primary-500: #2575b7;
$primary-400: #4a90d4;
$primary-300: #7ab3e0;
$primary-200: #b3d4f0;
$primary-100: #dceeff;
$primary-50:  #f0f7ff;

$accent-900: #064e3b;
$accent-800: #065f46;
$accent-700: #047857;
$accent-600: #059669;
$accent-500: #10b981;
$accent-400: #34d399;
$accent-300: #6ee7b7;
$accent-200: #a7f3d0;
$accent-100: #d1fae5;
$accent-50:  #ecfdf5;

// Neutrals
$gray-900: #111827;
$gray-800: #1f2937;
$gray-700: #374151;
$gray-600: #4b5563;
$gray-500: #6b7280;
$gray-400: #9ca3af;
$gray-300: #d1d5db;
$gray-200: #e5e7eb;
$gray-100: #f3f4f6;
$gray-50:  #f9fafb;

// Semantic
$color-background:    $gray-50;
$color-surface:       #ffffff;
$color-border:        $gray-200;
$color-text-primary:  $gray-900;
$color-text-secondary: $gray-600;
$color-text-muted:    $gray-400;

$color-primary:       $primary-600;
$color-primary-hover: $primary-700;
$color-accent:        $accent-500;
$color-accent-hover:  $accent-600;

$color-success: $accent-500;
$color-warning: #f59e0b;
$color-error:   #ef4444;
$color-info:    $primary-400;

// Typography
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

$font-size-xs:   0.75rem;
$font-size-sm:   0.875rem;
$font-size-base: 1rem;
$font-size-lg:   1.125rem;
$font-size-xl:   1.25rem;
$font-size-2xl:  1.5rem;
$font-size-3xl:  1.875rem;
$font-size-4xl:  2.25rem;

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

$line-height-tight:  1.25;
$line-height-snug:   1.375;
$line-height-normal: 1.5;
$line-height-relaxed: 1.625;

// Spacing
$spacing-1:  0.25rem;
$spacing-2:  0.5rem;
$spacing-3:  0.75rem;
$spacing-4:  1rem;
$spacing-5:  1.25rem;
$spacing-6:  1.5rem;
$spacing-8:  2rem;
$spacing-10: 2.5rem;
$spacing-12: 3rem;
$spacing-16: 4rem;
$spacing-20: 5rem;
$spacing-24: 6rem;

// Border radius
$radius-sm:   0.25rem;
$radius-base: 0.375rem;
$radius-md:   0.5rem;
$radius-lg:   0.75rem;
$radius-xl:   1rem;
$radius-full: 9999px;

// Shadows
$shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
$shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
$shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
$shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
$shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

// Transitions
$transition-fast:   150ms ease;
$transition-base:   250ms ease;
$transition-slow:   350ms ease;

// Breakpoints
$bp-sm:  640px;
$bp-md:  768px;
$bp-lg:  1024px;
$bp-xl:  1280px;
$bp-2xl: 1536px;

// Layout
$sidebar-width:     260px;
$header-height:     64px;
$container-max-width: 1280px;
