/* ============================================
   SKLAD-BUMAGA — Design Tokens
   Aesthetic: Nordic Industrial
   ============================================ */

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

  --primary:        #2563eb;
  --primary-hover:  #1d4ed8;
  --primary-light:  #eff6ff;
  --primary-ghost:  rgba(37, 99, 235, 0.08);

  /* ── Accent — cool teal ──────────────────── */
  --accent:       #0d9488;
  --accent-light: #ccfbf1;
  --accent-hover: #0f766e;

  /* ── Semantic colors ─────────────────────── */
  --success:       #059669;
  --success-light: #ecfdf5;
  --success-muted: #a7f3d0;

  --warning:       #d97706;
  --warning-light: #fffbeb;
  --warning-muted: #fde68a;

  --danger:        #dc2626;
  --danger-light:  #fef2f2;
  --danger-muted:  #fecaca;

  --info:          #0284c7;
  --info-light:    #f0f9ff;
  --info-muted:    #bae6fd;

  /* ── Neutrals — cool slate tint ──────────── */
  --slate-25:  #fbfcfd;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Aliases for backward compatibility */
  --gray-50:  var(--slate-50);
  --gray-100: var(--slate-100);
  --gray-200: var(--slate-200);
  --gray-300: var(--slate-300);
  --gray-400: var(--slate-400);
  --gray-500: var(--slate-500);
  --gray-600: var(--slate-600);
  --gray-700: var(--slate-700);
  --gray-800: var(--slate-800);
  --gray-900: var(--slate-900);

  /* ── Surfaces ────────────────────────────── */
  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --bg-sidebar: linear-gradient(180deg, #0f172a 0%, #1a2742 100%);
  --bg-sidebar-flat: #0f172a;
  --bg-header:  rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;

  /* ── Text ────────────────────────────────── */
  --text:           #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-inverse:   #ffffff;
  --text-on-primary: #ffffff;

  /* ── Borders ─────────────────────────────── */
  --border:        #e2e8f0;
  --border-light:  #f1f5f9;
  --border-strong: #94a3b8;
  --border-focus:  #2563eb;

  /* ── Shadows — layered for depth ─────────── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:     0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl:  0 20px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.25);
  --shadow-danger:  0 4px 14px rgba(220, 38, 38, 0.2);
  --shadow-inset:   inset 0 1px 3px rgba(15, 23, 42, 0.06);

  /* ── Layout ──────────────────────────────── */
  --sidebar-width:     256px;
  --sidebar-collapsed: 64px;
  --header-height:     60px;

  /* ── Radii ───────────────────────────────── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────── */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font:         'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.8125rem;  /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md:  0.9375rem;  /* 15px */
  --font-size-lg:  1.0625rem;  /* 17px */
  --font-size-xl:  1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ── Motion ──────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration:        200ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --transition:      200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="light"] {
  color-scheme: light;
}

body[data-theme="dark"] {
  color-scheme: dark;

  --primary-50:  #0f172a;
  --primary-100: #132238;
  --primary-200: #1d3557;
  --primary-300: #285184;
  --primary-400: #4f7db9;
  --primary-500: #60a5fa;
  --primary-600: #3b82f6;
  --primary-700: #93c5fd;
  --primary-800: #bfdbfe;
  --primary-900: #dbeafe;

  --primary:        #60a5fa;
  --primary-hover:  #93c5fd;
  --primary-light:  rgba(96, 165, 250, 0.14);
  --primary-ghost:  rgba(96, 165, 250, 0.14);

  --accent:       #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.14);
  --accent-hover: #5eead4;

  --success:       #34d399;
  --success-light: rgba(52, 211, 153, 0.14);
  --success-muted: #064e3b;

  --warning:       #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.16);
  --warning-muted: #78350f;

  --danger:        #f87171;
  --danger-light:  rgba(248, 113, 113, 0.16);
  --danger-muted:  #7f1d1d;

  --info:          #38bdf8;
  --info-light:    rgba(56, 189, 248, 0.16);
  --info-muted:    #0c4a6e;

  --slate-25:  #0b1220;
  --slate-50:  #0f172a;
  --slate-100: #162033;
  --slate-200: #1e293b;
  --slate-300: #334155;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #d8e3f0;
  --slate-800: #e2e8f0;
  --slate-900: #f1f5f9;
  --slate-950: #f8fafc;

  --bg:         #08111f;
  --bg-card:    #0f1b2d;
  --bg-sidebar: linear-gradient(180deg, #020617 0%, #0f1b2d 100%);
  --bg-sidebar-flat: #020617;
  --bg-header:  rgba(8, 17, 31, 0.84);
  --bg-elevated: #132238;

  --text:            #e5eefb;
  --text-secondary:  #cbd5e1;
  --text-muted:      #94a3b8;
  --text-inverse:    #ffffff;
  --text-on-primary: #08111f;

  --border:        #22324a;
  --border-light:  #162338;
  --border-strong: #475569;
  --border-focus:  #60a5fa;

  --shadow-xs:  0 1px 2px rgba(2, 6, 23, 0.5);
  --shadow-sm:  0 1px 3px rgba(2, 6, 23, 0.45), 0 1px 2px rgba(2, 6, 23, 0.35);
  --shadow:     0 2px 8px rgba(2, 6, 23, 0.5), 0 1px 3px rgba(2, 6, 23, 0.35);
  --shadow-md:  0 4px 12px rgba(2, 6, 23, 0.52), 0 2px 4px rgba(2, 6, 23, 0.36);
  --shadow-lg:  0 12px 32px rgba(2, 6, 23, 0.58), 0 4px 8px rgba(2, 6, 23, 0.4);
  --shadow-xl:  0 20px 48px rgba(2, 6, 23, 0.66), 0 8px 16px rgba(2, 6, 23, 0.45);
  --shadow-primary: 0 4px 14px rgba(96, 165, 250, 0.22);
  --shadow-danger:  0 4px 14px rgba(248, 113, 113, 0.2);
  --shadow-inset:   inset 0 1px 3px rgba(2, 6, 23, 0.35);
}