/* Top Online UI - Ocean
 * Wspólne tokeny dla wszystkich aplikacji Top Online.
 * Krój: Plus Jakarta Sans (Google Fonts), wagi 400-800.
 */
:root {
  /* Kolory - akcja */
  --to-color-action: #2563EB;
  --to-color-action-hover: #1D4ED8;
  --to-color-action-pressed: #1E40AF;
  --to-color-action-soft: #E6EEFE;

  /* Kolory - statusy */
  --to-color-positive: #0D9488;
  --to-color-positive-text: #0F766E;
  --to-color-positive-soft: #E0F5F3;
  --to-color-danger: #B42318;
  --to-color-danger-soft: #FDE8E5;
  --to-color-warning: #B54708;
  --to-color-warning-soft: #FFF6E5;

  /* Kolory - neutralne */
  --to-color-text: #0B1B2B;
  --to-color-text-muted: #506179;
  --to-color-bg: #F2F6FB;
  --to-color-surface: #FFFFFF;
  --to-color-border: #DCE5EF;
  --to-color-border-input: #CBD7E4;
  --to-color-divider: #EEF3F9;
  --to-color-chip: #EEF3F9;

  /* Wykresy */
  --to-chart-1: #2563EB;
  --to-chart-2: #0D9488;
  --to-chart-3: #93B4FF;
  --to-chart-4: #B9CDF8;
  --to-chart-grid: #EAF0F6;

  /* Typografia */
  --to-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --to-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --to-text-display: 800 40px/1.1 var(--to-font-family);
  --to-text-h1: 700 32px/1.15 var(--to-font-family);
  --to-text-h2: 700 18px/1.3 var(--to-font-family);
  --to-text-body: 400 14px/1.5 var(--to-font-family);
  --to-text-label: 600 12px/1.4 var(--to-font-family);
  --to-text-number: 700 32px/1.1 var(--to-font-family);

  /* Odstępy */
  --to-space-1: 4px;
  --to-space-2: 8px;
  --to-space-3: 12px;
  --to-space-4: 16px;
  --to-space-5: 24px;
  --to-space-6: 32px;
  --to-space-7: 40px;
  --to-space-8: 48px;

  /* Zaokrąglenia */
  --to-radius-tag: 4px;
  --to-radius-control: 8px;
  --to-radius-card: 12px;
  --to-radius-pill: 999px;

  /* Cienie */
  --to-shadow-control: 0 1px 2px rgba(11, 27, 43, .10);
  --to-shadow-panel: 0 8px 24px rgba(11, 27, 43, .08);
  --to-shadow-overlay: 0 12px 32px rgba(11, 27, 43, .12);
  --to-shadow-modal: 0 16px 40px rgba(11, 27, 43, .16);

  /* Fokus i rozmiary */
  --to-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #2563EB;
  --to-control-height: 44px;
  --to-control-height-compact: 36px;
  --to-sidebar-width: 248px;

  /* Ruch */
  --to-motion-fast: 100ms;
  --to-motion-base: 200ms;
  --to-motion-slow: 300ms;
}

/* Tryb ciemny - wersja robocza */
[data-theme="dark"] {
  --to-color-bg: #0E1622;
  --to-color-surface: #16212F;
  --to-color-border: #26354A;
  --to-color-text: #E8EEF6;
  --to-color-text-muted: #9FB0C6;
  --to-color-action: #7AA2FF;
  --to-color-positive: #5EEAD4;
}