/* tokens.css — EmberForge MF Portal Design System v1.0 (2026-05-19) */
/* Single source of truth dla wszystkich design tokens. */

:root {
  /* ==== BRAND ==== */
  --c-brand:        #E8622A;
  --c-brand-dark:   #c94e1e;
  --c-brand-hover:  #d65a26;
  --c-brand-bg:     #fff7ed;
  --c-brand-text:   #c94e1e;

  /* ==== SEMANTIC ==== */
  --c-success:       #16a34a;
  --c-success-bg:    #dcfce7;
  --c-success-text:  #15803d;
  --c-success-light: #bbf7d0;

  --c-danger:        #dc2626;
  --c-danger-bg:     #fee2e2;
  --c-danger-text:   #b91c1c;
  --c-danger-light:  #fecaca;

  --c-warning:       #f59e0b;
  --c-warning-bg:    #fef3c7;
  --c-warning-text:  #92400e;
  --c-warning-light: #fde68a;

  --c-info:          #0891b2;
  --c-info-bg:       #cffafe;
  --c-info-text:     #0e7490;
  --c-info-light:    #a5f3fc;

  --c-purple-bg:     #ede9fe;
  --c-purple-text:   #5b21b6;

  /* ==== NEUTRAL 50-900 ==== */
  --c-neutral-50:  #fafafa;
  --c-neutral-100: #f5f5f5;
  --c-neutral-200: #e5e5e5;
  --c-neutral-300: #d4d4d4;
  --c-neutral-400: #a3a3a3;
  --c-neutral-500: #737373;
  --c-neutral-600: #525252;
  --c-neutral-700: #404040;
  --c-neutral-800: #262626;
  --c-neutral-900: #171717;

  /* ==== ALIASES (backward compat z istniejącym kodem) ==== */
  --c-bg:          var(--c-neutral-50);
  --c-bg2:         var(--c-neutral-100);
  --c-bg3:         var(--c-neutral-200);
  --c-text:        var(--c-neutral-800);
  --c-text2:       var(--c-neutral-600);
  --c-text3:       var(--c-neutral-500);
  --c-border:      var(--c-neutral-200);
  --c-red:         var(--c-danger);
  --c-red-bg:      var(--c-danger-bg);
  --c-red-text:    var(--c-danger-text);
  --c-green:       var(--c-success);
  --c-green-bg:    var(--c-success-bg);
  --c-green-text:  var(--c-success-text);
  --c-amber:       var(--c-warning);
  --c-amber-bg:    var(--c-warning-bg);
  --c-amber-text:  var(--c-warning-text);
  --c-blue:        var(--c-info);
  --c-blue-bg:     var(--c-info-bg);
  --c-blue-text:   var(--c-info-text);

  /* ==== SPACING (4px base) ==== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==== TYPE SCALE ==== */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   24px;
  --text-3xl:   32px;

  /* ==== FONT WEIGHTS ==== */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ==== BORDER RADIUS ==== */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-full: 9999px;
  --r:      var(--r-md);

  /* ==== SHADOWS ==== */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 8px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.25);

  /* ==== Z-INDEX SCALE ==== */
  --z-base:     0;
  --z-sticky:   10;
  --z-dropdown: 20;
  --z-drawer:   50;
  --z-modal-bg: 90;
  --z-modal:    100;
  --z-toast:    200;

  /* ==== ANIMATION ==== */
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

/* ==== DARK MODE ==== */
:root.dark {
  --c-neutral-50:  #0f1419;
  --c-neutral-100: #161616;
  --c-neutral-200: #262626;
  --c-neutral-300: #3a3a3a;
  --c-neutral-400: #737373;
  --c-neutral-500: #a3a3a3;
  --c-neutral-600: #d4d4d4;
  --c-neutral-700: #e5e5e5;
  --c-neutral-800: #f5f5f5;
  --c-neutral-900: #fafafa;

  --c-brand-bg:    #332010;

  --c-success-bg:  #0f2d1a;
  --c-success-text: #4ade80;
  --c-danger-bg:   #3a1414;
  --c-danger-text: #fca5a5;
  --c-warning-bg:  #3a1f10;
  --c-warning-text: #fbbf24;
  --c-info-bg:     #0f1f2c;
  --c-info-text:   #67e8f9;
  --c-purple-bg:   #231b3a;
  --c-purple-text: #c4b5fd;
}